DataTable插件 后台分页 (服务器端分页)
<script type="text/javascript">
var persontable;
var personQueryCondition = {
//需要的查询条件放到这里来
worksn: "",
name: ""
}
$(document).ready(function () {
persontable = $('#dataTables-custom').DataTable({
dom: '<t><"bp"i><"bp"p><"bp"l>', //需要导出excel时打开
//dom: 'r<t><"dtpgclass"lp><"clear">', //需要导出excel时打开
aLengthMenu: [10, 20, 100, 10000],
language: {
"sProcessing": "数据加载中...",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "没有匹配结果",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项",
"sInfoEmpty": "当前显示第 0 至 0 项,共 0 项"
}, //提示信息
serverSide: true,
ajax: function (data, callback, settings) {
var sortinfo = DatablesExtend.getSortInfo(data, settings);
if (sortinfo != null) {
$.extend(personQueryCondition, sortinfo);
}
//排序属性可通过data.order属性获得
$.ajax({
type: "POST",
url: LinkAddress.personQuery,
cache: false, //禁用缓存
data: JSON.stringify(personQueryCondition), //传入组装的参数
contentType: "application/json;",
dataType: "json",
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", $.cookie('token'));
},
success: function (result) {
if (result.code == 0) {
callback({
draw: data.draw,
data: result.orgs,
recordsTotal: result.total,
recordsFiltered: result.total
});
}
}
});
},
columns: [
{ "data": null, "orderable": false },
{ "data": "worksn" },
{ "data": "name" },
{ "data": "sex" },
{ "data": "irismodeStr" },
{ "data": "orgs" },
{ "data": null }
],
order: [],
columnDefs: [{
"targets": 3,
"render": function (data, type, row, meta) {
if (data == 0) {
return '男';
}
else {
return '女';
}
}
}, {
"targets": 0,
"render": function (data, type, row, meta) {
return "<input type='checkbox' value='" + data.personid + "'>";
}
}, {
"targets": -1,
"render": function (data, type, row, meta) {
var d = data.personid;
var da = JSON.stringify({ personid: data.personid, name: data.name, worksn: data.worksn });
return "<a href='#' data-page='showpersoninfo' data-param=" + d + " onclick='pageRedirect(this)'> 查看 </a><a href='#' data-page='editperson' data-param=" + d + " onclick='pageRedirect(this)'> 编辑 </a><a href='#' data-page='bindingdev' data-param=" + da + " onclick='pageRedirect(this)'> 关联设备 </a><a href='#' data-param=" + d + " onclick='deletea(this)'> 删除 </a>";
}
}],
deferRender: true,
processing: true,
scrollY: '50vh',
scrollCollapse: false,
scroller: {
loadingIndicator: true
},
searching: false,
stateSave: false,
paging: true,
pageLength: 10,
//select: true,
buttons: [{
extend: 'excelHtml5',
title: 'Data export'
}],
});
});
需要查询的时候 只需要执行 : 把查询条件更新一下,然后执行 persontable.ajax.reload(); 这句话就好了
DataTable插件 后台分页 (服务器端分页)的更多相关文章
- datatable表格框架服务器端分页查询设置
更多内容推荐微信公众号,欢迎关注: js代码如下: $('#mytable').dataTable( { "bServerSide": true, //开启服务器模式,使用服务器端 ...
- thinkphp5配合datatable插件分页后端处理程序
thinkphp5配合datatable插件分页后端处理程序第一版DataTable.php v.1.0 <?php use think\Db; /** * DataTable.php. */ ...
- Spring boot入门(三):SpringBoot集成结合AdminLTE(Freemarker),利用generate自动生成代码,利用DataTable和PageHelper进行分页显示
关于SpringBoot和PageHelper,前篇博客已经介绍过Spring boot入门(二):Spring boot集成MySql,Mybatis和PageHelper插件,前篇博客大致讲述了S ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 基于bootstrap 的datatable插件的使用(php版)
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能.详细学习请参考其官网:http://datatables.net/中文网:http:/ ...
- datatables.js 简单使用--多选框和服务器端分页
说明:datatables是一款jQuery表格插件.感觉EasyUI的datagrid更易用 内容:多选框和服务器端分页 缘由:写这篇博客的原因是datatables的文档写的不怎么样,找东西很麻烦 ...
- 分享在MVC3.0中使用jQuery DataTable 插件
前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...
- DataTable插件通过js导出Excel
$('#myTab').DataTable( { serverSide: false,//分页,取数据等等的都放到服务端去. true为后台分页,每次点击分页时会请求后台数据,false为前台分页 d ...
- datatables服务器端分页要点
背景:当要查询大量数据的时候,有datatables自身的分页,明显查询比较慢,这是要使用服务器端分页 参数:"bServerSide": true, "fnServer ...
随机推荐
- win7 win10开启网络访问(网络访问 无法访问 网络访问需要输入密码 等问题处理)
狂客原创,转载请注明.侵权必究! 右键单击桌面的“网络”图标 选择“属性”. 在弹出的“网络和共享中心”窗口,点击“更改高级共享设置”. 参考文章:https://jingyan.baidu.com/ ...
- eclipse.ini 修改默认编码为 UTF-8
eclipse.ini 修改默认编码为 UTF-8 打开您的eclipse安装目录,找到eclipse.ini文件 打开eclipse.ini文件,在最下面加入一行代码:-Dfile.encoding ...
- jquery实现同时展示多个tab标签+左右箭头实现来回滚动
内容: jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果: 蓝色框圈起来的分别是向上翻. ...
- TensorFlow环境 人脸识别 FaceNet 应用(一)验证测试集
TensorFlow环境 人脸识别 FaceNet 应用(一)验证测试集 前提是TensorFlow环境以及相关的依赖环境已经安装,可以正常运行. 一.下载FaceNet源代码工程 git clone ...
- asp.net mvc 通过StyleBundle添加样式后,没有作用
在App_Start/BundleConfig配置 导入bootstrap,但不起作用,代码如下: bundles.Add(new StyleBundle("~/Content/bootst ...
- 六种常见排序算法的java实现
package edu.cn.ysw; //八种排序算法的实现与效率分析 /* * 内排序的种类: * 1.插入排序:直接插入排序.希尔排序. * 2.选择排序:简单选择排序.堆排序. 3.交换排序: ...
- 15:CSS3 3D
15:CSS3 3D 什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 CSS ...
- loadrunner笔记(三):设置、运行场景和生成测试报告
//上一篇的代码有点问题,问题出在 web_reg_find()函数中,这个函数简单的说是搜索下一步操作的请求对象(html)页面中是否存在相应的文本字符串.所以用在登录操作中,它搜索的是主页.htm ...
- C语言定义的操作mysql数据库的接口
编写的环境:centos7系统下,对mysql的衍生mariadb进行数据库的操作,包含设置访问数据库的参数,查询数据库和增删改数据库的三个功能.对于查询数据库,我这里允许不返回查询结果,用于判断查询 ...
- Python学习之旅(二十五)
Python基础知识(24):正则表达式 正则表达式:检查一个字符串是否与某个模式匹配 \d :匹配数字 \w :匹配字母或数字 . :匹配任意字符 {n} :匹配n个字符 {m,n} :匹配m到n个 ...