HTML代码

<table id="example" class="display" style="width:100%"><thead><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>First name</th><th>Last name</th><th>Position</th><th>Office</th><th>Start date</th><th>Salary</th></tr></tfoot></table>

js代码

url用于访问数据，cloumns用于取返回结果中的字段的对应关系。

$(document).ready(function() {$('#example').DataTable( {"processing": true,"serverSide": true,"ajax": {"url": "scripts/post.php","type": "POST"},"columns": [{ "data": "first_name" },{ "data": "last_name" },{ "data": "position" },{ "data": "office" },{ "data": "start_date" },{ "data": "salary" }]} );
} );

Ajax返回结果示例

recordsTotal和recordsFiltered的值都是数据总条数。

{"draw": 1,"recordsTotal": 57,"recordsFiltered": 57,"data": [{"first_name": "Airi","last_name": "Satou","position": "Accountant","office": "Tokyo","start_date": "28th Nov 08","salary": "$162,700"},{"first_name": "Angelica","last_name": "Ramos","position": "Chief Executive Officer (CEO)","office": "London","start_date": "9th Oct 09","salary": "$1,200,000"}]
}

关于后台请求的要求

需要接受的参数

draw:这个参数接收后写到返回结果里面，不需要使用到，每一次翻页都会增加，不论是上一页，下一页。
start:这是后台查询数据使用的，意思是查询的开始条数。
length:这也是查询数据使用的，意思是查询结果中返回多少条。

格式处理

如果返回结果需要在前端自定义格式，比如时间格式化等
下面从官网复制了代码后，进行修改，意思是让salary这个值显示的时候后面增加(元)

 $(document).ready(function () {$('#example').DataTable({"processing": true,"serverSide": true,"ajax": {"url": "scripts/post.php","type": "POST"},"columns": [{ "data": "first_name" },{ "data": "last_name" },{ "data": "position" },{ "data": "office" },{ "data": "start_date" },{"data": function (row, type, value, meta) {return row.salary + "(元)";}}]});
});

中文参考文档

DataTables+Ajax分页简单应用相关推荐

dataTables -- ajax 分页基本使用
dataTables是一款很强大很好用的前端table 分页插件,地址:dataTables 如何使用大家可以去官网看看教程,此处总结下dataTables结合ajax需要注意的点一,开始使用 Ja ...
html ajax分页,简单ajax 分页
简单分页: 效果图: 思路: 数据渲染=>数据遍历(每页显示已规定好的条数).bindList()和执行分页渲染.initPaginator() 点击分页和下一页的时候,重新请求数据渲染,对应的 ...
JQuery Datatables 服务端分页简单应用学习
背景介绍最近在一个简单小项目中碰到需要一个前端数据表格控件,在看了网上的资料后最终选择了JQuery Datatables.Datatables功能及其强大,基本满足我的所有需求,在加上其插件Edi ...
DataTables PHP AJAX 分页
DataTables 是一个 jQuery 插件,可以更轻松地在网页上添加分页. 只需要添加记录列表,它就会自动调整数据并创建具有搜索和排序功能的分页. 有一些选项可用于实现AJAX 分页. 在本教程 ...
ajax分页功能实现php,详解AJAX分页效果的简单实现
最近写一个给用户组添加角色的功能,要求一边是未添加的角色,一边是已添加的角色,还有搜索功能, 点击添加后,ajax保存操作. 本文主要为大家详细介绍了AJAX分页效果的简单实现代码,具有一定的参考价值 ...
java ajax jquery分页插件_jquery ajax分页插件的简单实现
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...
分页插件 ajax请求,jquery ajax分页插件的简单实现
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...
yii2 分页ajax,yii2的分页和ajax分页
要想使用Yii分页类第一步:在控制器层加载分页类 use yii\data\Pagination; 第二步: 使用model层查询数据,并用分分页,限制每页的显示条数 $data = User::f ...
datatables实现分页
datatables实现分页分为客户端分页和服务端分页两种,客户端分页很简单,只要把返回的所有数据根据dataSrc设置好就可以了. 这里说一下服务端分页的实现. html: <!DOCTYPE ...

DataTables+Ajax分页简单应用

DataTables+Ajax分页入门

HTML代码

js代码

Ajax返回结果示例

关于后台请求的要求

格式处理

DataTables+Ajax分页简单应用相关推荐

最新文章

热门文章