jQuery DataTable显示条目,搜索框和排序不起作用?

时间:2016-07-13 04:06:20

标签: javascript php jquery datatable

我有数据表显示条目的问题,排序和过滤基本上所有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>

process.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
    );

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

1 个答案:

答案 0 :(得分: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;

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