datatable如何重新加载新的数据-搜索替换原有数据

[xxssjj119922]

<table id="basic-table" class="table table-hover" style="width:100%;">
        <thead style="width: 100%">
            <tr >
                <th>序号</th>
                <th>品牌</th>
                <th>品牌名</th>
                <th>商品名称</th>
                <th>型号</th>
                <th>颜色</th>
                <th>现价</th>
                <th>平均价</th>
                <th>最低价</th>
                <th>店铺</th>
                <th>毛利率</th>
                <th>库存进价</th>
                <th>1店</th>
                <th>2店</th>
                <th>3店</th>
                <th>4店</th>
                <th>5店</th>
                <th>6店</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <div id="kongjian">
        <div id="kongjian1" >
    </div>
        <div id="kongjian2" >
    </div>
        <div id="kongjian3" >
    </div>
    </div>



<script>
        $(document).ready(function () {
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' }
        });

        var table = $('#basic-table').DataTable({
            lengthMenu: [10,25,50,100],
            pagingType: "full_numbers",
            searching: false,
            destroy: true,
            stateSave: false,
            deferRender: true,
            ordering:false,
            columnDefs: [
                   {
                     "targets": [ -1 ],
                     "visible": false,
                     "searchable": false
                   },
                   {
                     "targets": [ -2 ],
                     "visible": false
                   },
                    {
                     "targets": [ -3 ],
                     "visible": false,
                     "searchable": false
                   },
                    {
                     "targets": [ -4 ],
                     "visible": false,
                     "searchable": false
                   },
                    {
                     "targets": [ -5 ],
                     "visible": false,
                     "searchable": false
                   },
                    {
                     "targets": [ -6 ],
                     "visible": false,
                     "searchable": false
                   },
                    {
                     "targets": [ 2 ],
                     "visible": false,
                     "searchable": false
                   },
                    {
                    "targets": [ -8 ],
                    "createdCell": function (td, cellData, rowData, row, col) {
                        if (cellData <0) {
                            $(td).css('color', 'red')
                        }
                        else {
                            $(td).css('color', 'green')
                        }
                    }
                    }

                ],\
            sAjaxSource: "{% url 'request_backend' %}",
            "processing": false,
            "bLengthChange": true,
            "serverSide": true,
            "bPaginate" : true,
            "bInfo" : true,
            "fnServerData" : function(sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType" : 'json',
                    "type" : "post",
                    "url" : sSource,
                    "data" : aoData,
                    "success" : function(resp){
                        fnCallback(resp);
                    }
                });
            },
            // ajax请求成功传递回来后数据的展示
            columns: [
                    
                    {data: 'name',width: "14%"},
                    {data: 'pmodel',width: "14%"},
                    {data: 'pcolr',width: "10%"},
                    {data: 'now_price',width: "8%"},
                    {data: 'ave_price',width: "8%",
                        render: function(data, type, row, meta) {
                        if(row.now_price>row.ave_price&row.ave_price!==0){
                            return '<div class="text-warning" style="color:#F71B2D" >'+ data +'</div>';
                        }
                        if(row.now_price<row.ave_price){
                            return '<div class="text-warning" style="color:#007bff" >'+ data +'</div>';
                        }
                        else{
                            return '';
                        }
                }},
                    {data: 'market_low',width: "8%",
                        render: function(data, type, row, meta) {
                        if(row.now_price>row.market_low&row.market_low!==0){
                            return '<div class="text-warning" style="color:#F71B2D" >'+ data +'</div>';
                        }
                        if(row.now_price === row.market_low){
                            return '<div class="text-warning" style="color:#5E5E5E" >'+ data +'</div>';
                        }
                        else{
                            return '';
                        }
                }},
                    {data: 'mklow_store',width: "12%"},                    
                    {data: 'profit',width: "8%",
                    render:function(data)
                    {if(data !== 0){
                        var tmp = ((100*data).toFixed(2)).toString();
                        var num =tmp+"%";
                        {return num;}}
                        else{return '';}}},
                    {data: 'stock_inprice',width: "8%",
                    render:function(data)
                    {if(data !== 0){return data;}
                        else{return '';}}},
                    {data: 'store1',width: "8%",},
                    {data: 'store2',width: "8%",},
                    {data: 'store3',width: "8%",},
                    {data: 'store4',width: "8%",},
                    {data: 'store5',width: "8%",},
                    {data: 'store6',width: "8%",},
                ],
            "dom": 't<"#kongjian1"i><"#kongjian2"l><"#kongjian3"p>',




            "language": {
                "processing": "正在获取数据，请稍后...",
                "lengthMenu": "选择每页 _MENU_ 展示 ",
                "zeroRecords": "未找到匹配结果--抱歉",
                "info": "当前显示第 _PAGE_ 页结果，共 _PAGES_ 页, 共 _TOTAL_ 条记录",
                "infoEmpty": "没有数据",
                "infoFiltered": "(获取 _MAX_ 项结果)",
                "sLoadingRecords": "载入中...",
                "paginate": {
                    "first": "首页",
                    "previous": "上一页",
                    "next": "下一页",
                    "last": "末页"
                }
            }
        } );
    });


</script>
    <script>
        $("#searchButton").click(function(){
            $.ajax({
        url: "{% url 'search_thing' %}",
        method: 'POST', // or another (GET), whatever you need
        data: {
            brandcode: $("#brandcode").val(), // data you need to pass to your function
            namecode: $("#namecode").val(),
            typecode: $("#typecode").val(),
            colorcode: $("#colorcode").val(),
        },
        success: function (data) {
            alert("搜索!");
            console.log(data);
            Table = $('#basic-table').dataTable();{
            if(Table)
                Table.fnClearTable();
                Table.fnDestroy();

    }

        }});
        });

    </script>

目前只写到这里。 在找一个方法如何将表里面行数据清除，表头和处理方式都保留， 重新加载接受成功的data数据。 自定义模糊搜索，点击按钮响应。 求大神回复，谢谢！ 代码看不清楚的话我放文本文件，感谢感谢 新建文本文档 (2).txt

[ssy341]

@xxssjj119922 你只需要调用DT提供的重新加载数据的api即可，dt.ajax.reload(null,false); 你开启了服务器模式，使用上面代码即可重新获取服务器的数据更新到表格，具体文档参考http://datatables.club/reference/api/ajax.reload()

传递参数，你需要参考这个文档：https://datatables.club/reference/option/ajax.data

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
      return $.extend( {}, d, {
        "extra_search": $('#extra').val()
      } );
    }
  }
} );