php/js 用JQuery.Datatable 实现数据的分页加载
来源:互联网 发布:数据库 migration 编辑:程序博客网 时间:2024/06/05 11:02
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.如此,我们便实现了分页、以及数据的分段加载,是不是很简单呢。
- php/js 用JQuery.Datatable 实现数据的分页加载
- jquery dataTable 后台加载数据并分页
- jquery-datatable实现表格加载,分页和删除功能
- js实现数据加载分页功能的实现(通用)
- jQuery+Ajax+PHP实现异步分页数据显示--js可参考
- 用ajax+jQuery 实现页面加载更多(另类的分页)
- 用Extjs实现分页自动加载数据的Ajax实现
- jQuery插件 dataTable Ajax分页功能实现
- JQuery DataTable 1.10服务端分页实现
- 实现jquery DataTable前后台动态分页
- js + jquery 实现无限加载页面的分页(类似京东手机版)
- 关于Jquery datatable动态加载数据心得
- 使用PHP+JQuery+Ajax分页的实现
- 使用PHP+JQuery+Ajax分页的实现
- Listview分页加载数据的实现
- 用js实现的 带省略号的 分页 php
- php+ajax+jquery 实现无刷新分页以及js缓存
- struts+spring+hibernate用jquery实现数据分页异步加载,页面不刷新
- 【转】VS 2005中实现对Python 2.5.2的模块扩展实验
- 函数模板和模板函数
- AVPlayer 简易媒体播放器
- ionic入门教程第二课-从Tabs案例看Ionic的MVC架构
- ny860(又见01背包)
- php/js 用JQuery.Datatable 实现数据的分页加载
- iOS下的Masonry适配
- How the buffer cache works
- java中volatile关键字的含义
- Android getx(),getRawX(),getTop()方法间的区别
- 在Ubuntu下切换当前python的版本
- 面向对象设计原则之依赖注入原则(DIP)
- Java Socket编程
- c++项目试验(一)——求两数的和与差