• 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(); 这句话就好了

  • 相关阅读:
    WPF 前台处理绑定字段
    DataBinding?资料绑定? #4绑定表达式原来可以这样用?(DataSet / DataReader)
    DataBinding?资料绑定? #7 伤脑筋的 GridView加总、小计(原来如此 / 范例下载)
    实战ASP.NET MVC 1.0 #3,新增一笔资料(Create / Add)
    实战ASP.NET MVC 1.0 #1,我的第一支MVC程序,展现所有数据(主细表的Master)
    ASP.NET MVC与Web Form的使用时机?
    实战ASP.NET MVC 2.0 #5,删除一笔记录
    DataBinding?资料绑定? #3以DropDownList为例
    DataBinding?资料绑定? #5绑定表达式 与 ListView的HyperLink(超级链接)
    DataBinding?资料绑定? #6 伤脑筋的 GridView加总、小计(Question)
  • 原文地址:https://www.cnblogs.com/tony-brook/p/9679924.html
Copyright © 2020-2023  润新知