jQuery DataTable 显示条目、搜索框和排序不起作用？答案

【问题标题】：jQuery DataTable Show entries, Search box and sort not working?jQuery DataTable 显示条目、搜索框和排序不起作用？
【发布时间】：2016-11-15 12:00:50
【问题描述】：

我有一个数据表显示条目、排序和过滤的问题，基本上所有的 JS 功能都不起作用。我已经包含了 JS 文件。一些细节：我的 DataTables 是服务器端处理并从服务器端以 json 格式检索数据。

datatable.php

<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {   
 $.fn.dataTable.ext.errMode = 'none';
   var table = $('#example').DataTable( {
    "processing": true,
    "serverSide": true,
    "jQueryUI": true,
     "ordering": true,
     "searching": true,
     "order": [[1, 'desc']],//set column 1 (time)
      "ajax": {
       url: "process.php",
       type: 'POST',
       data: {
       from: "<?php echo $from; ?>",
       to: "<?php echo $to; ?>"
          }
       },    
    "columns": [
        {
            "className":'details-control',
            "orderable":false,
            "data":null,
            "defaultContent": ''
        },
        { "data": "time"},
         { "data": "message", 
            "render": function ( data, type, row )
              {
                  data = data.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
                  return type === 'display' && data.length > 200 ?
                 '<span title="'+data+'">'+data.substr( 0, 98 )+'...</span>' :data;
               }
          }

    ]

} );

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );       
    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format( row.data())).show();
        tr.addClass('shown');
     }
  } );
} );
</script>
 <body>
   <table id="example" class="display" cellspacing="0" width="100%">
   <thead>
       <tr>
          <th ></th>
           <th data-search-index="3">time</th>
           <th data-search-index="3">Message</th>
           </tr>
    </thead>
              <tfoot>
                <tr>
                  <th></th>
                  <th>time</th>
                  <th>Message</th>
                </tr>
              </tfoot>
            </table>
</body>

进程.php

 $search='';
 $requestData= $_REQUEST;
 if(isset($_POST["search"]["value"]) && !empty($_POST["search"]["value"])){
 $search ='&q=_all:'.$_POST["search"]["value"];
 }
$qryurl ='<ip>/log/_search?size=10'.$search  ;

    if ( !empty($requestData['start']) && $requestData['length'] != '-1' )
    {

        $qryurl ='<ip>/log/_search?size=10&from='.$requestData['start'].$search; 
    }
 .......
 //json output 
 $results = array(
   "draw"  => intval($requestData['draw']),
    "iTotalRecords" =>intval($total),
      "iTotalDisplayRecords" => intval($total),
     "aaData"=>$sourceary
    );

现在我可以看到表格，但我无法排序或搜索并显示更多条目。有什么建议吗？非常感谢，更多

【问题讨论】：

标签： javascript php jquery datatable

【解决方案1】：

我认为您需要在 DataTable 中添加一个对象：

ordering: true,
searching: true,
order: [[0, 'asc']]//default

在您的 PHP 代码中，您必须添加类似这样的内容才能进行订购：

if(count($_POST['order'])){
  $orderBy = $_POST['columns'][$_POST['order'][0]['column']]['data'];
  $orderDir = $_POST['order'][0]['dir'];
}

对于搜索：

if(isset($_POST["search"]["value"]) && !empty($_POST["search"]["value"])){
  $search = $_POST["search"]["value"];
}

对于条目，您必须将此变量放入您的网址：

$howMany = (isset($_POST['length'])) ? intval($_POST['length']) : 10;//10 is default its size param
$start = (isset($_POST['start'])) ? intval($_POST['start']) : 0;

并将这些变量放入您的查询中。

【讨论】：

我已将搜索变量添加到我的查询中，但更新后数据表搜索框不接受输入
将您的更改粘贴到问题
我已经更新了我的问题。在搜索框中的某些内容之后，表格记录的内容比原始结果多得多，但应该比原始结果少，不是吗？
你是用elasticsearch来搜索的吗？我看到参数 _search 了？
所以你应该使用elastic.co/guide/en/elasticsearch/reference/current/…或elastic.co/guide/en/elasticsearch/reference/current/…。不是我的脚本的错，为elasticsearch创建错误的地址