简体   繁体   English

如何创建一个完全基于AJAX的jQuery-dataTable?

[英]How to create a fully AJAX based jQuery-dataTable?

the default behaviour of dataTable is good, as long as the number of rows are not 907234. I would like to use Ajax oriented working, so get 10 records per pages, etc. I know I can set AJAX source, but only once, and then paging would be futule. 只要行数不是907234,dataTable的默认行为就很好。我想使用面向Ajax的工作方式,因此每页获取10条记录,等等。我知道我可以设置AJAX源,但只能设置一次,并且那么分页就很麻烦了。 (how would it work, if datatable doesnt know the number of records?) not to mention the searching. (如果datatable不知道记录数,它将如何工作?)更不用说搜索了。 So how to start? 那么如何开始呢?

The server side approach of Datatable is like so: Datatable的服务器端方法如下:

$('#dataTable').dataTable({
  "sServerMethod": "GET",
  "bProcessing": true,
  "bServerSide": true,
  "sAjaxSource": "data.php",
  "aoColumns": [null, null, null, { "bSortable": false }],
  "order": [[ 1, "asc" ]],
  "oLanguage": {"sZeroRecords": "No Members found", "sEmptyTable": "No members to display"},
});

The backend ie data.php should be like so: 后端即data.php应该像这样:

<?php
            $start  = $_GET['iDisplayStart'];
            $length = $_GET['iDisplayLength'];
            $sSearch = $_GET['sSearch'];
            $col = $_GET['iSortCol_0'];
            $arr = array(1 => 'oe.org_given_id', 2 => 'usr.name');
            $sort_by = $arr[$col];
            $sort_type = $_REQUEST['sSortDir_0'];

            $query = "SELECT usr.id,usr.name,oe.org_given_id FROM users usr JOIN organization_employees oe on usr.id=oe.employee_id WHERE oe.organization_id=".$organization_id." AND (usr.name LIKE '%".$sSearch."%' OR oe.org_given_id LIKE '%".$sSearch."%') ORDER BY ".$sort_by." ".$sort_type." LIMIT ".$start.", ".$length;
            $db=new DB();
            $resultSet=$db->SelectRead($query);
            while($row = mysqli_fetch_assoc($resultSet))
            {
              $data[] = $row;
            }
            $counterQuery = "SELECT COUNT(usr.id) as total FROM users usr JOIN organization_employees oe on usr.id=oe.employee_id WHERE oe.organization_id=".$organization_id.";";
            $countSet = $db->SelectRead($counterQuery);
            $iTotal=0;
            while($counterRow =  mysqli_fetch_assoc($countSet))
            {
              $iTotal = $counterRow['total'];
            }
            $rec = array(
              'iTotalRecords' => $iTotal,
              'iTotalDisplayRecords' => $iTotal,
              'aaData' => array()
            );
            $k=0;
            if (isset($data) && is_array($data))
            {
              foreach ($data as $item)
              {
                $rec['aaData'][$k] = array(
                                      0 => $k,
                                      1 => $item['org_given_id'],
                                      2 => $item['name'],
                                      3 => "Delete"
                                    );
                $k++;
              }
            }
            header("Content-type:application/json");
            echo json_encode($rec);
?>

The parameters like: iDisplayStart and iDisplayLength etc are default given by Datatables. 数据表默认提供了诸如iDisplayStartiDisplayLength等参数。

Some online working examples are: 一些在线工作示例是:

https://coderexample.com/datatable-demo-server-side-in-phpmysql-and-ajax/ http://phpflow.com/php/datatables-example-server-side-processing-with-php/ http://phpflow.com/demo/datatable/ https://coderexample.com/datatable-demo-server-side-in-phpmysql-and-ajax/ http://phpflow.com/php/datatables-example-server-side-processing-with-php/ http: //phpflow.com/demo/datatable/

A github repository of my code is below with some additional features offcourse: 我的代码的github存储库位于下面,其中包含一些其他功能:

https://github.com/shaktiphartiyal/DataTable-Editor-Free https://github.com/shaktiphartiyal/DataTable-Editor-Free

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM