搜索后数据表未重绘

问题描述

我正在使用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();   
        });

当我单击搜索按钮时，表格没有重绘任何内容， 预先感谢

解决方法

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

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

,

您尝试了吗？

$（'＃kt_datatable'）。DataTable（）。draw（）;