php/js 用JQuery.Datatable 实现数据的分页加载

1.首先，我们写一个简单的html table,确定显示的column

 <table id="sample-table-2">

      <thead>
            <tr>
                 <th>ID</th>
                  <th>名称</th>
                  <th>编号</th>
            </tr>
      </thead>

 </table>

2.dataTable参数设定

jQuery(function($) {
                var oTable1 = $('#sample-table-2').dataTable( {
                "aoColumns": [
                {"bSortable" : true},
                {"bSortable" : true},
                {"bSortable" : true} ], //是否支持排序，对应第一步table中的column
                "bServerSide" : true,//表示从服务器加载数据
                "bPaginate" : true,// 分页按钮
                "bLengthChange" : true,// 每行显示记录数
                "iDisplayLength" : 25,// 每页显示行数
                "aaSorting": [[0, "desc"]],//默认的排序
                "sAjaxSource": "server_data.php",//这个是请求的地址
                "fnServerData": retrieveData // 获取数据的处理函数
                } );

}

3.定义函数 retrieveData，主要作用是将服务器端返回的数据显示在table中

function retrieveData( sSource,aoData, fnCallback) {
            //    alert(JSON.stringify(aoData));
                $.ajax({
                    url : sSource,//这个就是请求地址对应sAjaxSource
                    data : {"aoData":JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
                    type : 'post',
                    dataType : 'json',
                    async : false,
                    success : function(result) {
                        fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
                    },
                    error : function(msg) {
                        //alert(JSON.stringify(msg));
                    }
                });
            }

4.在服务器中处理请求，请求地址为第二步中定义的sAjaxSource，并返回数据。以php为例。

   $aoData = $_REQUEST['aoData']; //接收请求的参数，是json格式的数据。它对应第三步中的ajax中的data。
    $aoData = json_decode($aoData);//json decode,这里会产生一个object.。 json_decode($aoData,true)则会产生一个数组。
    $iDisplayLength = 0; // 每页显示的数量
    $iDisplayStart = 0; // 从哪一个开始显示
    $iSortCol_0 = 0;// order by 哪一列
    $sSortDir_0 = "asc";
    $sSearch = ''; // 搜索的内容，可结合mysql中的like关键字实现搜索功能
    
    foreach($aoData as $item) { // 这里就是获取对于的数据了
        if ($item -> name  == "iDisplayLength") {
            $iDisplayLength = $item -> value;
        }
        
        if ($item -> name  == "iDisplayStart") {
            $iDisplayStart = $item -> value;
        }
        
        if ($item -> name  == "iSortCol_0") {
            $iSortCol_0 = $item -> value;
        }
        
        if ($item -> name  == "sSortDir_0") {
            $sSortDir_0 = $item -> value;
        }
        
        if ($item -> name  == "sSearch") {
            $sSearch = $item -> value;
        }
    }

  获取到相关信息之后，查找数据库，拿到对于数据。

$data = array();

$result = $conn -> query($sql);

while($row = $result -> fetch_assoc()) {//这里要注意，data必须是一个二维数组，其顺序会对应到第一步table中的column
        $index = count($data);
        $data[$index][0] = $row['id'];
        $data[$index][1] = $row['name'];
        $data[$index][2] = $row['serial_number'];

}

//最后返回的格式也是固定的，否则会出错

   $arrays['aaData'] = $data;
    $arrays['iTotalRecords'] = $count;
    $arrays['iTotalDisplayRecords'] = $count;
    
    echo json_encode(
        $arrays
    );

5.如此，我们便实现了分页、以及数据的分段加载，是不是很简单呢。