jquery DataTable实现前后台动态分页
程序员文章站
2022-03-21 14:34:08
整理文档，搜刮出一个jquery datatable实现前后台动态分页，稍微整理精简一下做下分享。
html代码:
整理文档，搜刮出一个jquery datatable实现前后台动态分页，稍微整理精简一下做下分享。
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="external nofollow" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.12/css/datatables.bootstrap4.min.css" rel="external nofollow" 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;
?>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： Angular+Node生成随机数的方法