实现jquery DataTable前后台动态分页

最新推荐文章于 2025-07-01 14:21:23 发布

原创最新推荐文章于 2025-07-01 14:21:23 发布 · 1.4w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #分页 #datatable

jquery插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML、jQuery和DataTables插件实现动态表格加载的例子。通过PHP后端与前端交互，实现数据分页显示的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>测试页面</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap4.min.css" rel="stylesheet">


</head>
<body>
<div style="width:50%;height:500px;margin:150px auto  ;background-color: #f4cccc">
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Cellphone</th>
        <th>Position</th>
        <th>Company</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src=" //cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        refreshDataTable();
    });

 var refreshDataTable=function() {
     var table = $('#example').DataTable({
         //"ajax":"data/tabledata.json",
        // "iDisplayLength": 3,
         "sPaginationType": "full_numbers",
         "bPaginite": true,
         "bInfo": true,
         "bSort": true,
         "processing": false,
         "serverSide": true,
         "sAjaxSource": "customize/datatable.php",//这个是请求的地址
         "fnServerData": retrieveData

     });
     function retrieveData(url, aoData, fnCallback) {
         var data={"data":{"id":"123123","name":"2s",}};
         $.ajax({
             url: url,//这个就是请求地址对应sAjaxSource
             data : {
                 "aoData" : JSON.stringify(aoData)
             },
             type: 'POST',
             dataType: 'json',
             async: false,
             success: function (result) {

                 //var obj=JSON.parse(result);
                 console.log(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/json');
   $res = $_POST['aoData'];
  $sEcho = 0;
  $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;
   }
   }   
    $Array = Array(); 
     //此处生成50条数据，模仿数据库数据
    for ($i = 1; $i < 51; $i++) {
        $d = array($i,$i,$i,$i,$i);
        Array_push($Array, $d);
    }

     $json_data = array ('sEcho'=>$sEcho,'iTotalRecords'=>50,'iTotalDisplayRecords'=>50,'aaData'=>array_slice($Array,$iDisplayStart,$iDisplayLength));  //按照datatable的当前页和每页长度返回json数据
    $obj=json_encode($json_data);
   echo $obj; 

?>