dataTables -- ajax 分页基本使用

dataTables是一款很强大很好用的前端table 分页插件，地址：dataTables

如何使用大家可以去官网看看教程，此处总结下dataTables结合ajax需要注意的点

一，开始使用

JavaScript代码

$(document).ready(function() {$('#example').DataTable( {"ajax": "数据url","columns": [{ "data": "name" },{ "data": "position" },{ "data": "office" },{ "data": "extn" },{ "data": "start_date" },{ "data": "salary" }]} );
} );

json数据

{"data": [{"id": "1","name": "Tiger Nixon","position": "System Architect","salary": "$320,800","start_date": "2011/04/25","office": "Edinburgh","extn": "5421"},{"id": "2","name": "Garrett Winters","position": "Accountant","salary": "$170,750","start_date": "2011/07/25","office": "Tokyo","extn": "8422"},]
}

数据格式必须一致，data作为key，值为数组对象，获取对象属性值能够直接使用data.属性名来调用获取。

如果不能使用data.属性名来直接调用获取值则需要使用dataSrc来动态指向数据源。

JavaScript代码

$(document).ready(function() {$('#example').DataTable( {"ajax": "数据url","dataSrc": "data.records","columns": [{ "data": "name" },{ "data": "position" },{ "data": "office" },{ "data": "extn" },{ "data": "start_date" },{ "data": "salary" }]} );
} );

json数据

 "data": {"records": [{"id": "1","name": "Tiger Nixon","position": "System Architect","salary": "$320,800","start_date": "2011/04/25","office": "Edinburgh","extn": "5421"},{"id": "2","name": "Garrett Winters","position": "Accountant","salary": "$170,750","start_date": "2011/07/25","office": "Tokyo","extn": "8422"},]}

二，服务器处理(Server-side processing)

        "processing": true,"serverSide": true,ajax(data, callback, settings) {console.log(data);//封装请求参数var param = {};param.pageSize = data.length;       //页面显示记录条数，在页面显示每页显示多少项的时候param.pageIndex = data.start + 1;   //开始的记录序号console.log(param);$.ajax({type: 'get',url: 'http://192.168:8766/User/list',cache: false,  //禁用缓存data: param,dataType: 'json',success: function(res) {setTimeout( function () {var out = {};out.draw = data.draw;out.recordsTotal = res.data.count;out.recordsFiltered = res.data.count;out.data =  res.data.records;callback( out );}, 50 );},error() {alert('error');}})},"bLengthChange": false,     //关闭选择显示条数"bSort": false,             //不能排序"iDisplayLength": 10,"pagingType": "full_numbers","language": {"bProcessing": "正在加载中......","sZeroRecords": "没有检索到数据", "info": "显示 _START_ 至 _END_ 条记录，共 _TOTAL_ 条记录","sInfoFiltered": "数据表中共为 _MAX_ 条记录","oPaginate" : {  "sFirst" : "首页",  "sPrevious" : "上一页",  "sNext" : "下一页",  "sLast" : "末页"  },},"columns": [{data: 'UserId',render(data, type, full, meta) {return `<input type="checkbox" class="checkchild" value="${data}" /><img class="check-img" src="../assets/img/backstage_icon_cheakbox_default.png" alt="">`}},{data : "Account"},{data : "RealName"},{data : "Email"},{data : "DepartmentId"},{data : "UserId"},{data : "WorkGroupId"},{data : "IsManager"},{data : "Mobile"},{data : "CreateDate",},{render(data, type, full, meta) {return `<div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs"><button class="am-btn am-btn-bg-white am-btn-xs am-text-secondary edit"><span class="am-icon-pencil-square-o"></span>编辑</button><button class="am-btn am-btn-bg-white am-btn-xs am-text-danger am-hide-sm-only del"><span class="am-icon-copy"></span> 删除</button><button class="am-btn am-btn-bg-white am-btn-xs am-text-warning am-hide-sm-only authorize"><span class="am-icon-trash-o"></span> 授权</button></div></div>`}}]

param.pageSize = data.length;       //页面显示记录条数，在页面显示每页显示多少项的时候
param.pageIndex = data.start + 1;   //开始的记录序号

pageSize：为后台数据，每页有多少条数据
pageIndex：页面索引

因为data.start默认值为0，所以加一表示第一页开始

记录自己踩过的坑

dataTables -- ajax 分页基本使用相关推荐

DataTables+Ajax分页简单应用
DataTables+Ajax分页入门 HTML代码 js代码 Ajax返回结果示例关于后台请求的要求格式处理参考官网 https://datatables.net/examples/serve ...
DataTables PHP AJAX 分页
DataTables 是一个 jQuery 插件,可以更轻松地在网页上添加分页. 只需要添加记录列表,它就会自动调整数据并创建具有搜索和排序功能的分页. 有一些选项可用于实现AJAX 分页. 在本教程 ...
yii2 分页ajax,yii2的分页和ajax分页
要想使用Yii分页类第一步:在控制器层加载分页类 use yii\data\Pagination; 第二步: 使用model层查询数据,并用分分页,限制每页的显示条数 $data = User::f ...
datatables实现分页
datatables实现分页分为客户端分页和服务端分页两种,客户端分页很简单,只要把返回的所有数据根据dataSrc设置好就可以了. 这里说一下服务端分页的实现. html: <!DOCTYPE ...
java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
PHP、jQuery、jQueryPager结合实现Ajax分页
建立html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
think php ajax分页,thinkPHP5框架实现基于ajax的分页功能示例
本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法首先看一下tp5 ...
ajax分页实现（php）
ajax分页实现(php) 使用jquery.pagination.js插件引入js文件.css文件 <link rel="stylesheet" href="/ ...
Thinkphp ajax分页
Thinkphp中用ajax分页和普通的ajax分页的区别在于处理位置的不同,thinkphp是在控制器的方法中处理ajax传的值,然后返回数据.下面是一个点击事件触发后,显示的内容用ajax分页. ...

dataTables -- ajax 分页基本使用

一，开始使用

JavaScript代码

json数据

JavaScript代码

json数据

二，服务器处理(Server-side processing)

dataTables -- ajax 分页基本使用相关推荐

最新文章

热门文章