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[].column]["data"];
dir = data.order[].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=;
int pageSize=; 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 == "" ? "" : draw),
recordsTotal = ds.Tables[].Rows[][],
recordsFiltered = ds.Tables[].Rows[][], data = ds.Tables[]
}; 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="" 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="">
<div id="tree"></div>
</td>
<td> <div style="margin:2px; text-align:right" >
已经选择人员： <span id="count" style="color:red"></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: , data: datasource, enableLinks: false,
onNodeSelected: function (event, key) { }
});
},
error: function () { }
}); setTimeout(InitTable, ); }); 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) - ));
}
else
{
$("#count").html((parseInt(count) +));
} $(this).toggleClass('selected');
}); $('#txt_key').on('keyup', function () {
table.column().search("").draw();
table.search(this.value).draw();
}); $('#tree').on('nodeSelected', function (event, data) { table.search("").draw();
table.column().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 = ;
var result = '';
var table = $('#tbl_users').DataTable();
var _c = ; var rows = table.rows('.selected').data(); for (var i = ; i < rows.length; i++) { checked++;
var tds = rows[i] var username = tds[];
var displayname = tds[]; result = result + "$" + username + "$" + displayname + "!"; } if (checked > ) {
$("#sel").val(result);
return true;
}
else {
layer.alert('请至少选择一条记录', );
return false;
}
} </script> </form>
</body>
</html>