PHP+Ajax+Datatables实现分页

最新推荐文章于 2024-05-25 09:50:59 发布

Z_894821194

最新推荐文章于 2024-05-25 09:50:59 发布

阅读量6.5k

点赞数 4

分类专栏：前端文章标签： PHP Datatables Ajax

本文链接：https://blog.csdn.net/qq_24018243/article/details/52444518

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果如上图所示，之前对于这个插件一直都不太懂，今天写了一下很多东西都是固定的，只是里面的参数比较复杂且不易理解。建议去官方文档查看参数的意义。虽然没有看源码是如何填充的，但是从后台来看分页还是与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;
?>

Z_894821194

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
PHP+Ajax+Datatables实现分页

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

扫一扫