Question

自从2天以来，我一直在敲打我的脑袋，这个问题似乎非常简单并且有很多帮助，但是我无法让它发挥作用。我试图在网格的每一列上进行服务器端搜索，当我调用dataTable.columns(0).search('search-term').draw()时，它生成的POST请求始终为columns[0][search][value]为空。

以下是我尝试过的两种尝试不同的方法，但这些方法对我来说都不起作用，显然我有些缺失。

I also attached a snapshot for clarity，下面是我的DataTable的完整配置，任何人都可以指出我做错了什么。

方法＃1

initComplete: function () {

        $('.scheduling-search')
            .on('keyup change', function () {
                var i = $(this).attr('data-column');
                var v = $(this).val();
                schedulingGrid.columns(i).search(v).draw();
            }
        );
    }

方法＃2

schedulingGrid.columns().every( function () {
    var column = this;
    $( 'input', this.footer() ).on( 'keyup change', function () {
        column
            .search( this.value )
            .draw();
    } );
});

以下是我的DataTable的完整配置

var schedulingGrid = $('#scheduling-manager-grid').DataTable({
    processing: true,
    searchDelay: 1000,
    pageLength: {$pageSize},
    paginate: true,
    lengthChange: false,
    filter: false,
    info: true,
    autoWidth: false,
    serverSide: true,
    order: [[3, '{$defaultSortOrder}']],
    language: {
        paginate: {
            next: '',
            previous: ''
        }
    },
    ajax: {
        type: 'post',
        url: '{$url}',
    },
    columns: [
        {
            width: '40px',
            data: 'briefingId',
            name: 'id',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'briefingTitle',
            name: 't.title',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'dateSubmitted',
            name: 't.created_at',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'preferredDate',
            name: 't.preferred_date',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'requesterName',
            name: 't.requestor_name',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'briefingStatus',
            name: 't.briefing_status_id',
            searchable: true,
            orderable: true
        },
        {
            width: '100px',
            data: 'briefingType',
            name: 't.briefing_type_id',
            searchable: true,
            orderable: true
        },
        {
            data: 'notes',
            name: 'notes',
            searchable: true,
            orderable: false
        }
    ],
    initComplete: function () {

        $('.scheduling-search')
            .on('keyup change', function () {
                var i = $(this).attr('data-column');
                var v = $(this).val();
                schedulingGrid.columns(i).search(v).draw();
            }
        );
    }
});

HTML就像

<table id="scheduling-manager-grid">
  <thead>
    <tr>
      <th>Briefing ID</th>
      <th>Briefing Title</th>
      <th>Date Submitted</th>
      <th>Preferred Briefing Date</th>
      <th>Requestor Name</th>
      <th>Briefing Status</th>
      <th>Briefing Type</th>
      <th>Notes</th>
    </tr>
  </thead>
  <thead>
    <tr>
      <td><input style="width: 50px;" type="text" data-column="0" class="scheduling-search"></td>
      <td><input style="width: 80px;" type="text" data-column="1" class="scheduling-search"></td>
      <td><input style="width: 80px;" type="text" data-column="2" class="scheduling-search"></td>
      <td><input style="width: 80px;" type="text" data-column="3" class="scheduling-search"></td>
      <td><input style="width: 80px;" type="text" data-column="4" class="scheduling-search"></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </thead>
</table>

Answer 1

<强>解

我配置了数据包错误。来自datatables.net的Allan指出了这个问题并修复了它。我不得不从配置中删除filter: false以使其正常工作。

请参阅此处的完整讨论：https://datatables.net/forums/discussion/comment/98607#Comment_98607

DataTables.net dataTable.columns（0）.search（＆＃39; term＆＃39;）。draw（）不填充列[0] [search] [value]

1 个答案: