DateTables的服务器分页
function InitTable() { var table = $('#tbl_users').DataTable(); if ($.fn.dataTable.isDataTable('#tbl_users')) { table.destroy(); } $("#txt_key").keyup(function () { $("#txt_deptid").val(''); table.ajax.reload(); }); $('#tbl_users').unbind(); $('#tbl_users').on('click', 'tr', function () { $(this).toggleClass('selected'); }); //提示信息 var lang = { "sProcessing": "处理中...", "sLengthMenu": "每页 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "当前显示第 _PAGE_ 共 _PAGES_ 页，共 _TOTAL_ 项。", "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页", "sJump": "跳转" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }; //初始化表格 table = $("#tbl_users").dataTable({ language: lang, //提示信息 autoWidth: false, //禁用自动调整列宽 processing: true, //隐藏加载提示,自行处理 serverSide: true, //启用服务器端分页 searching: false, //禁用原生搜索 orderMulti: false, //启用多列排序 ordering: true,//禁止排序 order: [], //取消默认排序查询,否则复选框一列会出现小箭头 dom: 'frtip',//lfrtip frtip pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers columnDefs: [{ // "targets": 'nosort', //列的样式名 //"orderable": false //包含上样式名‘nosort’的禁止排序 }], ajax: function (data, callback, settings) { //封装请求参数 // var param = {}; // param.limit = 10;// data.length;//页面显示记录条数，在页面显示每页显示多少项的时候 // param.start = data.start; //开始的记录序号 // param.page = (data.start / data.length) + 1;//当前页码 // param.key = $("#txtKey").val();//参数//console.log(param); //ajax请求数据 //alert(data); data.order[0].dir：asc var col = ""; var dir = ""; if (data.order != "") { col = data.columns[data.order[0].column]["data"]; dir = data.order[0].dir; } $.ajax({ type: "GET", url: "json_users.aspx", cache: false, //禁用缓存 async: false, data: { key: escape($("#txt_key").val()), deptid: $("#txt_deptid").val(), start: data.start, limit: data.length, dir: dir, col: col }, //传入组装的参数 dataType: "json", success: function (result) { callback(result); } }); }, //列表表头字段 columns: [ { "data": "Username" }, { "data": "Displayname" }, { "data": "Email" }, { "data": "Title" } ] }).api(); //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象 // var table = $('#tbl_users').DataTable(); //$('#tbl_users tbody').on('click', 'tr', function () { // //var count = $("#count").html(); // //if ($(this).hasClass("selected")) { // // $("#count").html((parseInt(count) - 1)); // //} // //else { // // $("#count").html((parseInt(count) + 1)); // //} // $(this).toggleClass('selected'); //}); }
后台代码：
protected void Page_Load(object sender, EventArgs e) { string draw = Request["draw"] + ""; string key = Server.UrlDecode(Request["key"]+""); int start=0; int pageSize=10; if(!string.IsNullOrEmpty(Request["start"])) { start = int.Parse(Request["start"]); } if(!string.IsNullOrEmpty(Request["limit"])) { pageSize = int.Parse(Request["limit"]); } string dir=Request["dir"]; string colname = Request["col"]; string sql = @" begin select IDENTITY(int,1,1) as Indexs, Username, Displayname, Deptname as Title, Deptid, Email into #Temp From Wx_users where 1=1 "; if(!string.IsNullOrEmpty(key.Trim())) { sql+=" and username+displayname+deptname+pinyin like '%"+key+"%' "; } sql += " select * from #temp where Indexs>" + start + " and Indexs<=" + (start + pageSize); if (colname == "") { sql += " order by Indexs asc "; } else { sql += " order by " + colname + " " + dir; } sql+=" select count(*) from #temp end "; DataSet ds = new DataSet(); SqlDataAdapter da = new SqlDataAdapter(sql,@"server=.\sqlexpress;uid=sa;pwd=sa;database=123"); da.Fill(ds); dynamic newtonresult = new { draw = Convert.ToInt32(draw == "" ? "0" : draw), recordsTotal = ds.Tables[1].Rows[0][0], recordsFiltered = ds.Tables[1].Rows[0][0], data = ds.Tables[0] }; JsonSerializerSettings setting=new JsonSerializerSettings(); string jsonString = JsonConvert.SerializeObject(newtonresult); //good Response.Clear(); Response.ContentType = "application/json"; Response.Write(jsonString); }
独立的，客户的分页
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Pop_Users.aspx.cs" Inherits="Dotnet.Common.Pop_Users" %> <%@ OutputCache Duration="300" VaryByParam="none" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../javascript/jquery-1.9.1.min.js"></script> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <script src="../bootstrap/js/bootstrap.min.js"></script> <script src="../javascript/layer/layer.js"></script> <link href="../javascript/datatables/datatables.css" rel="stylesheet" /> <script src="../javascript/datatables/datatables.min.js"></script> <link href="../javascript/Tree/bootstrap-treeview.min.css" rel="stylesheet" /> <script src="../javascript/Tree/bootstrap-treeview.min.js"></script> <link href="../style/patch.css" rel="stylesheet" /> <script src="../javascript/common.js"></script> <style> .bgRed { background-color: #b0bed9; color:#ffffff; } </style> </head> <body style="margin:8px" > <form id="form1" runat="server"> <style> #tree li { font-size:13px; line-height:13px; } </style> <table width="99%"> <tr valign="top"> <td width="320"> <div id="tree"></div> </td> <td> <div style="margin:2px; text-align:right" > 已经选择人员： <span id="count" style="color:red">0</span> 人 <input class="form-control" id="txt_key" type="text" placeholder="输入关键字搜索" style="width:200px; display:inline-block" /> <button class="btn btn-primary btn-flat" id="btnSelect" onclick="if(!Issel()) return false; parent.setPopAttend($('#sel').val()); parent.layer.closeAll(); " > 提交选中</button> <button class="btn btn-success" id="btnSelect" onclick="select(); return false; " >反选</button> </div> <table class="table table-hover" style="border-top:solid 1px #eee; display:none" id="tbl_users" > <thead> <tr> <th style="width:50px">登录名</th> <th style="width:70px">显示名</th> <th style="width:90px">邮件</th> <th >职位</th> <th style="width:10px"></th> <th style="width:10px" ></th> </tr> </thead> </table> <div id="loading" style="width:600px; text-align:center;"> <img src="../images/loading.gif" /> 数据加载中 </div> </td> </tr> </table> <input type="hidden" name="sel" id="sel"/> <script> $(document).ready(function () { var aj = $.ajax({ url: 'json_dept.aspx', cache: false, dataType: 'json', success: function (datasource) { $('#tree').treeview({ levels: 2, data: datasource, enableLinks: false, onNodeSelected: function (event, key) { } }); }, error: function () { } }); setTimeout(InitTable, 100); }); function InitTable() { $('#tbl_users').DataTable({ stateSave: false, "sDom": '<"top">rt<"bottom"p><"clear">', "ajax": 'json_users.aspx', }); $("#tbl_users").show(); $("#loading").hide(); $('#tbl_users').on('draw.dt', function () { $("#tbl_users th:nth-child(5)").hide(); $("#tbl_users th:nth-child(6)").hide(); $("#tbl_users td:nth-child(5)").hide(); $("#tbl_users td:nth-child(6)").hide(); $("#tbl_users").css("width", "100%"); }); var table = $('#tbl_users').DataTable(); $('#tbl_users tbody').on('click', 'tr', function () { var count = $("#count").html(); if ($(this).hasClass("selected")) { $("#count").html((parseInt(count) - 1)); } else { $("#count").html((parseInt(count) +1)); } $(this).toggleClass('selected'); }); $('#txt_key').on('keyup', function () { table.column(4).search("").draw(); table.search(this.value).draw(); }); $('#tree').on('nodeSelected', function (event, data) { table.search("").draw(); table.column(4).search(data.tags).draw(); }); } function select() { var table = $('#tbl_users').DataTable(); $('#tbl_users tbody tr').each(function () { $(this).toggleClass('selected'); }); var rows = table.rows('.selected').data(); $("#count").html(rows.length); } function Issel() { var checked = 0; var result = ''; var table = $('#tbl_users').DataTable(); var _c = 0; var rows = table.rows('.selected').data(); for (var i = 0; i < rows.length; i++) { checked++; var tds = rows[i] var username = tds[0]; var displayname = tds[1]; result = result + "$" + username + "$" + displayname + "!"; } if (checked > 0) { $("#sel").val(result); return true; } else { layer.alert('请至少选择一条记录', 12); return false; } } </script> </form> </body> </html>
