数据表单个列搜索不起作用

时间:2016-06-21 20:34:39

标签: javascript jquery datatable datatables-1.10

我用ssp.class

实现了数据表

当我使用此页面中的代码时 https://datatables.net/examples/api/multi_filter.html 看起来数据表正在搜索但没有结果。在控制台中,我没有看到任何错误和响应,看起来它正在设置一些数据(但在搜索字段中每个字符有20-30个获取请求,许多有0个结果,只有少数有记录)

这是我的代码

var table2 = $('#dataTables-subjekt-childrow').DataTable( {
        'dom': 'C<"clear">lfrtip',
        'dom': 'T<"clear">lfrtip',
        'tableTools': {
                "aButtons": [
                    "copy",
                    "print",
                    {
                        "sExtends":    "collection",
                        "sButtonText": "Save",
                        "aButtons":    [ "csv", "xls", "pdf" ]
                    }
                ]
            },
        'destroy':true,
        'stateSave': true,
        'columns.orderSequence': [[0, 'asc']], 
        'processing': true,
        'serverSide': true,
        'ajax': '../list_subjekt2.php',
        'jQueryUI': true,
        'autoWidth': false,
        'searching':true,
        'lengthChange': true,
        'paging': true,
        'ordering': true,
        'pageLength': 100,
        'info': true,
        'pagingType': 'full_numbers',
        'language': {"url": "../json/datatables_slovak.json"},
        'columns': [
            { "data": "nazov", "searchable": true },
            { "data": "okres", "searchable": true },
            { "data": "kraj", "searchable": true },
            { "data": "typ", "searchable": true },
            { "data": "spravuje", "searchable": true },
             {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "searchable": false,
                "defaultContent": ''
            },
            {
                "className":      'details-contact',
                "orderable":      false,
                "data":           null,
                "searchable": false,
                "defaultContent": ''
            },
            {
                "className":      'details-comm',
                "orderable":      false,
                "data":           null,
                "searchable": false,
                "defaultContent": ''
            },
            {
                "className":      'details-files',
                "orderable":      false,
                "data":           null,
                "searchable": false,
                "defaultContent": ''
            },
            {
                "className":      'details-edit',
                "orderable":      false,
                "data":           null,
                "searchable": false,
                "defaultContent": ''
            },
            {
                "className":      'details-delete',
                "orderable":      false,
                "searchable": false,
                "data":           null,
                "defaultContent": ''
            }
        ],
        'order': [[0, 'asc']],
        initComplete: function ()
            {
              var r = $('#dataTables-subjekt-childrow tfoot tr');
              r.find('th').each(function(){
                $(this).css('padding', 8);
              });
              $('#dataTables-subjekt-childrow thead').append(r);
              $('#search_0').css('text-align', 'center');
            }



    } );


     $('#dataTables-subjekt-childrow tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Hľadaj '+title+'" />' );
    } );

     table2.columns().every( function () {

    var that = this;
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
               that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

当我输入最后一个函数而不是值&#34;那个&#34;我的表名,它将我的搜索放在上面的全文搜索中

如何才能让这个单独的列搜索工作?

编辑: 当我将.column(this.colIdx)添加到我的代码中时,我可以看到即使我将搜索字符串放在我的第3或第4列中,它只在第一列中搜索

 that
                    .column( this.colIdx )
                    .search( this.value )
                    .draw();

EDIT2: 我试图禁用服务器端,由客户端处理它,但除了它太慢,结果是相同的 当我看到服务器端搜索发送的参数时,它发送了params ok但是11个请求,因为我在datatable中有11列,而对于某些绘制,它返回正确的json和一些空的。但它表明没有数据可以绘制

1 个答案:

答案 0 :(得分:2)

好吧,我发现这个有用的帖子,我意识到我必须把搜索放在datatable的initComplete中 https://datatables.net/forums/discussion/31765/server-side-with-individual-column-searching-text-inputs

所以我的代码现在看起来像这样

 var table2 = $('#dataTables-subjekt-childrow').DataTable( {
       blablabla
    'order': [[0, 'asc']],
    initComplete: function ()
        {
          var r = $('#dataTables-subjekt-childrow tfoot tr');
          r.find('th').each(function(){
            $(this).css('padding', 8);
          });
          $('#dataTables-subjekt-childrow thead').append(r);
          $('#search_0').css('text-align', 'center');

  var api = this.api();

  // Apply the search
  api.columns().every(function() {
    var that = this;

    $('input', this.footer()).on('keyup change', function() {
      if (that.search() !== this.value) {
        that
          .search(this.value)
          .draw();
      }
        });
    });

        }



} );


 $('#dataTables-subjekt-childrow tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="Hľadaj '+title+'" />' );
} );