<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插件 后台分页 (服务器端分页)的更多相关文章

  1. datatable表格框架服务器端分页查询设置

    更多内容推荐微信公众号,欢迎关注: js代码如下: $('#mytable').dataTable( { "bServerSide": true, //开启服务器模式,使用服务器端 ...

  2. thinkphp5配合datatable插件分页后端处理程序

    thinkphp5配合datatable插件分页后端处理程序第一版DataTable.php v.1.0 <?php use think\Db; /** * DataTable.php. */ ...

  3. Spring boot入门(三):SpringBoot集成结合AdminLTE(Freemarker),利用generate自动生成代码,利用DataTable和PageHelper进行分页显示

    关于SpringBoot和PageHelper,前篇博客已经介绍过Spring boot入门(二):Spring boot集成MySql,Mybatis和PageHelper插件,前篇博客大致讲述了S ...

  4. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  5. 基于bootstrap 的datatable插件的使用(php版)

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能.详细学习请参考其官网:http://datatables.net/中文网:http:/ ...

  6. datatables.js 简单使用--多选框和服务器端分页

    说明:datatables是一款jQuery表格插件.感觉EasyUI的datagrid更易用 内容:多选框和服务器端分页 缘由:写这篇博客的原因是datatables的文档写的不怎么样,找东西很麻烦 ...

  7. 分享在MVC3.0中使用jQuery DataTable 插件

    前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...

  8. DataTable插件通过js导出Excel

    $('#myTab').DataTable( { serverSide: false,//分页,取数据等等的都放到服务端去. true为后台分页,每次点击分页时会请求后台数据,false为前台分页 d ...

  9. datatables服务器端分页要点

    背景:当要查询大量数据的时候,有datatables自身的分页,明显查询比较慢,这是要使用服务器端分页 参数:"bServerSide": true, "fnServer ...

随机推荐

  1. adsas数据库去O记

    adsas 数据库是用于广告买量数据分析;在17年由 Oracle 迁移到 PostgreSQL.现把之前的迁移笔记整理下.本次迁移表91个:存储过程21个:数据库大小2G. 1. 准备Postgre ...

  2. Java API获取consumer group最新提交位移的时间

    碰到了有人问起这个问题,目前java consumer没有利用OffsetAndMetadata中的metadata字段记录提交的时间,故直接通过java consumer来查询是不行,我们需要直接读 ...

  3. jstat命令详解

    Jstat是JDK自带的一个轻量级小工具.全称“Java Virtual Machine statistics monitoring tool”,它位于java的bin目录下,主要利用JVM内建的指令 ...

  4. Spring data Jpa,Mybatis,读写锁,@Lock 使用

    Spring data jpa 支持注解式的读写锁(悲观锁),实际上这个东西硬编码也简单,但是基于Jpa 命名方式定义的Sql,只能用注解添加支持读写锁了, 不了解读写锁的可以点这里 mysql读写锁 ...

  5. HTML使用CSS样式的方法

      在html网页中引入css样式表主要有一下四种方法 1.行内引入 <p ></p> 2.嵌入式 <style type="text/css"> ...

  6. C# Aspose.Cells.dll Excel操作总结

    简介 Aspose.Cells是一款功能强大的 Excel 文档处理和转换控件,不依赖 Microsoft Excel 环境,支持所有 Excel 格式类型的操作. 下载 Aspose.Cells.d ...

  7. 小程序 将图片文字变成一整张图片海报(判断其中字符串宽度可通过计算字符串.length*字符宽度)

    //test.xml<canvas bindtap='showhaibao' canvas-id="myCanvas" style="width:{{canvasw ...

  8. PHP(控制语句,随机数,循环语法)

     1.随机数:Math.random():0到1 不包括1 永远取不到2.控制语句if(){} for循环  语法 运行步骤(过程,原理)   1.初始化 2.判断条件 3.变量改变  index:下 ...

  9. day21 二十一、垃圾回收机制、re正则

    一.内存管理 1.垃圾回收机制:不能被程序访问到的数据称之为垃圾 2.引用计数:引用计数是用来记录值的内存地址被记录的次数 每一次对值地址的引用都可以使该值的引用计数 +1 每一次对值地址的释放都可以 ...

  10. LeetCode 19 - 删除链表的倒数第N个节点 - [链表]

    题目链接:https://leetcode-cn.com/problems/remove-nth-node-from-end-of-list/ 题解: 两个 $p,q$ 指针均指向头,然后 $q$ 先 ...