PHP+Ajax+Datatables实现分页

来源：互联网发布：玩游戏网络延迟不稳定编辑：程序博客网时间：2024/05/22 18:06

效果如上图所示，之前对于这个插件一直都不太懂，今天写了一下很多东西都是固定的，只是里面的参数比较复杂且不易理解。建议去官方文档查看参数的意义。虽然没有看源码是如何填充的，但是从后台来看分页还是与PHP分页类似。PHP分页是传递一个参数page，确定偏移量然后从数据库取值将其循环输出到表格中。而这个插件是将选择的页面和每一页展开的条数通过ajax传递给后台，后台是直接将数据库中的数据全部取出来放到数组中，由页面和条数通过array_slice这个函数将数据放到数组中，然后json_encode()再传递给前端，前端直接填充展示。

值得注意的是，传递回前端的数组的参数是固定的，不然就会返回参数错误，如下图所示

前端代码如下（有详细注释）

<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试页面</title>    <meta name="description" content="">    <meta name="keywords" content="">    <link href="DataTables-1.10.12/media/css/jquery.dataTables.min.css" rel="stylesheet">    <link href="DataTables-1.10.12/media/css/dataTables.bootstrap4.min.css" rel="stylesheet">    <link rel="stylesheet" type="text/css" href="bootstrap.css">    <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>    <script type="text/javascript" language="javascript" src="DataTables-1.10.12/media/js/jquery.dataTables.js"></script>    <style type="text/css">        #example{            text-align: center;        }    </style></head><body><div style="width:100%;margin:0px auto  ;background-color: #f5f5f5"><table id="example" class="table table-striped table-hover table-bordered" width="100%" align="center">    <thead>    <tr>        <th>Name</th>        <th>Cellphone</th>        <th>Position</th>        <th>Company</th>        <th>Salary</th>        <th>test</th>        <th>Id</th>    </tr>    </thead>    <tbody>    </tbody></table></div><script type="text/javascript">    $(document).ready(function() {        refreshDataTable();    }); var refreshDataTable=function() {     var table = $('#example').DataTable({         "sPaginationType": "full_numbers",         'language': {                  'emptyTable': '没有数据',                  'loadingRecords': '加载中...',                  'processing': '查询中...',                  'search': '检索:',                  'lengthMenu': '每页 _MENU_ 条',                  'zeroRecords': '没有数据',                  // 'paginate': {                  //     'first':      '第一页',                  //     'last':       '最后一页',                  //     'next':       '下一页',                  //     'previous':   '上一页'                  // },                  'info': '第 _PAGE_ 页 / 总 _PAGES_ 页',                  'infoEmpty': '没有数据',                  'infoFiltered': '(过滤总件数 _MAX_ 条)'              },         "searching":false,         "bPaginite": true,         "bInfo": true,         "bSort": false,         "processing": false,         "bServerSide": true,         "sAjaxSource": "page.php",//这个是请求的地址         "fnServerData": retrieveData// 获取数据的处理函数     });     function retrieveData(url, aoData, fnCallback) {         $.ajax({             url: url,//这个就是请求地址对应sAjaxSource             data : {                 "aoData":JSON.stringify(aoData)             },             type: 'POST',             dataType: 'json',             async: true,             success: function (result) {                 fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的             },              error:function(XMLHttpRequest, textStatus, errorThrown) {                 alert("status:"+XMLHttpRequest.status+",readyState:"+XMLHttpRequest.readyState+",textStatus:"+textStatus);             }         });     } };</script></body></html>

后台PHP页面

<?php    header('Content-type: text/html; charset=utf8');    require_once ('conf.php');    $res = $_POST['aoData'];    $iDisplayStart = 0; // 起始索引    $iDisplayLength = 0;//分页长度    $jsonarray= json_decode($res) ;    foreach($jsonarray as $value){         if($value->name=="sEcho"){            $sEcho=$value->value;        }        if($value->name=="iDisplayStart"){            $iDisplayStart=$value->value;        }        if($value->name=="iDisplayLength"){            $iDisplayLength=$value->value;        }     }    $data = array();    $Array = Array();     $mysqli = new mysqli($db_host,$db_user,$db_passwd,$db_name);    $mysqli->query("SET NAMES utf8mb4");    if (mysqli_connect_errno()) {        printf("Connect failed: %s\n", mysqli_connect_error());        exit();    }    $sql = "select * from postback";    $result = $mysqli->query($sql);    $count = $result->num_rows;    while($row = $result->fetch_array()) {        $data = array($row["id"],$row["cid"],$row["platform"],$row["device_id"],$row["ip"],$row["device_type"],$row["create_time"]);        Array_push($Array,$data);     }      $json_data = array ('sEcho'=>$sEcho,'iTotalRecords'=>$count,'iTotalDisplayRecords'=>$count,'aaData'=>array_slice($Array,$iDisplayStart,$iDisplayLength));  //按照datatable的当前页和每页长度返回json数据      $obj=json_encode($json_data);      echo $obj;?>

0 0