搜索后数据表未重绘

Question

我正在使用 DataTables 插件，但在使用自定义过滤器表单搜索我的 DataTable 时遇到了困难。这是我正在使用的 html 代码，这是插件的最后一个版本，下面的示例使用服务器端处理：

     <form class="kt-form kt-form--fit mb-15">
         <div class="row mb-6">
          <div class="col-lg-3  mb-lg-0 mb-6">
                <label>Id:</label>
                <input type="text" class="form-control datatable-input" id="myFilter" 
               placeholder="E.g: 2" data-col-index="0"/>
            </div>
            <div class="col-lg-3 mb-lg-0 mb-6">
                <label>Tipo</label>
                <select class="form-control datatable-input" data-col-index="1">
                    <option value="">Seleccione</option>
                    <option value="venta">Venta</option>
                    <option value="compras">Compras</option>
                    <option value="gastos">Gastos</option>
                    <option value="rectificativa">Rectificativa</option>
                </select>
            </div>
            <div class="col-lg-3  mb-lg-0 mb-6">
                <label>CIF/NIF:</label>
                   <input type="text" class="form-control datatable-input" placeholder="E.g: 37000-300"  data-col-index="2"/>
            </div>
 </div>  

    <button class="btn btn-primary btn-primary--icon" id="kt_search">
                    <span>
                        <i class="la la-search"></i>
                        <span>Buscar</span>
                    </span>
                </button>
<!--begin: Datatable-->
    <table class="table table-bordered table-hover table-checkable" id="kt_datatable">
                            <thead>
                          <tr>
                                          <th>id</th>
                                          <th>Tipo</th>
                                          <th>CIF / NIF</th>
                                          <th>N Factura</th>
                                          <th>Cliente</th>
                                          <th>Fecha desde</th>
                                          <th>Fecha hasta</th>
                                          <th>Importe Desde</th>
                                          <th>Importe Hasta</th>
                                          
                                      
                              </tr>
                </thead>


            </table>
           <!--end: Datatable-->
           </div>
          </div>
          <!--end::Card-->
                </div>
          <!--end::Container-->
        </div>
         <!--end::Entry-->
            </div>
            <!--end::Content-->

在 javascript 代码中我有这个：

   $.fn.dataTable.Api.register('column().title()', function() {
    return $(this.header()).text().trim();
   });

var initTable1 = function() {
    // begin first table
    var table = $('#kt_datatable').DataTable({
        responsive: true,
        // Pagination settings
        dom: `<'row'<'col-sm-12'tr>>
        <'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
        // read more: https://datatables.net/examples/basic_init/dom.html

        lengthMenu: [5, 10, 25, 50],
        searching: true,
        pageLength: 10,

        language: {
            'lengthMenu': 'Display _MENU_',
        },

        searchDelay: 1500,
        processing: true,
        serverSide: true,
        ajax: {
            url: 'server-side.php',
            type: 'POST',
            data: {
                // parameters for custom backend script demo
                columnsDef: [
                    'id','tipo', 'cif_nif', 'numero_factura', 'cliente', 'fecha_desde',
                    'fecha_hasta', 'importe_desde', 'importe_hasta', ],
            }, 
        },
        columns: [
            {data: 'id'},
            {data: 'tipo'},
            {data: 'cif_nif'},
            {data: 'numero_factura'},
            {data: 'cliente'},
            {data: 'fecha_desde'},
            {data: 'fecha_hasta'},
            {data: 'importe_desde'},
            {data: 'importe_hasta'},
            
        ]
             });
        

    $('#kt_search').on('click', function(e) {
        e.preventDefault();
        var params = {};
        $('.datatable-input').each(function() {
            
            var i = $(this).data('col-index');
            
            if (params[i]) {
                params[i] += '|' + $(this).val();
            }
            else {
                params[i] = $(this).val();
            }
            
        });
        
        $.each(params, function(i, val) {
            // apply search params to datatable         
            table.column(i).search(val ? val : '', false, false);
        });
        table.table().draw();   
        });

当我点击搜索按钮时，表格不会重绘任何内容， 提前致谢

Answer 1

https://datatables.net/reference/api/ajax.reload()

$('#kt_datatable').DataTable().ajax.reload();

Answer 2

你试过了吗？

$('#kt_datatable').DataTable().draw();