HTML：==================================================================
<div class="ibox-content">
<div class="thead">
<input placeholder="請輸入搜索內容" id="strWhere" type="text" />
</div>
<table id="userlist" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th></th>
<th><input type="checkbox" class="checkall" /></th>
<th>昵稱</th>
<th>電話</th>
<th>性別</th>
<th>年齡</th>
<th>注冊日期</th>
<th>狀態</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
JS:（注：我的jQuery DataTables已經漢化，此處不再配置oLanguage）=====================
$(function () {
$('#userlist').DataTable({
bProcessing: true, //DataTables載入數據時，是否顯示‘進度’提示
bStateSave: false, //是否打開客戶端狀態記錄功能,此功能在ajax刷新紀錄的時候不會將個性化設定回復為初始化狀態
aLengthMenu: [10,20, 40, 60, 100, 1000], //更改顯示記錄數選項
iDisplayLength: 10, //默認顯示的記錄數
bInfo: true, //是否顯示頁腳信息，DataTables插件左下角顯示記錄數
bPaginate: true, //是否顯示（應用）分頁器
autoWidth: true, //是否自適應寬度
bScrollCollapse: true, //是否開啟DataTables的高度自適應，當數據條數不夠分頁數據條數的時候，插件高度是否隨數據條數而改變
sPaginationType: "full_numbers", //詳細分頁組，可以支持直接跳轉到某頁
bSort: false, //是否啟動各個字段的排序功能
bFilter: false, //是否啟動過濾、搜索功能
bServerSide: true,//開啟此模式后，你對datatables的每個操作 每頁顯示多少條記錄、下一頁、上一頁、排序（表頭）、搜索，這些都會傳給服務器相應的值。
"ajax": {
url: "/Ajax/UserMgrAjax.ashx?cmd=userList",
type:"POST",
data: { "strWhere": $('#strWhere').val() }
} ,
columns: [
{
"sWidth": "4%",
"sClass": "text-center",
"data": null, "targets": 0
},
{
"sWidth": "4%",
"sClass": "text-center",
"data": "u_id",
"render": function (data, type, full, meta) {//這里就是要顯示的checkbox多選框了
return '<input type="checkbox" class="checkchild" value="' + data + '" />';
},
"bSortable": false
},
{ "sClass": "text-center", "data": "u_name" },
{ "sClass": "text-center", "data": "u_tel" },
{
"sClass": "text-center",
"data": "u_sex",
"render": function (data, type, row, meta) {
var content = "保密";
if (data == "1")
content = "男";
if (data == "2")
content = "女";
return content;
}
},
{ "sClass": "text-center", "data": "u_age" },
{ "sClass": "text-center", "data": "u_registerdate" },
{
"sClass": "text-center",
"data": "u_state",
"render": function (data, type, row, meta) {
var content = "非正常";
if (data == "0")
content = "正常";
if (data == "1")
content = "鎖定";
return content;
}
},
{
"sClass": "text-center",
"data": "u_registerdate",
render: function (data, type, row, meta) {
return "<a title='編輯' class='glyphicon glyphicon-edit nounderline' href='javascript:editTabRow();'></a> ";
}
}
],
fnDrawCallback: function () {
var startIndex = this.api().context[0]._iDisplayStart;//獲取到本頁開始的條數
this.api().column(0).nodes().each(function (cell, i) {
//翻頁序號連續
cell.innerHTML = startIndex + i + 1;
});
}
});
$(".checkall").click(function () {
var check = $(this).prop("checked");
$(".checkchild").prop("checked", check);
});
});
.ashx.cs：==================================================================
namespace SmartAdmin.Ajax
{
/// <summary>
/// UserMgrAjax 的摘要說明
/// </summary>
public class UserMgrAjax : IHttpHandler
{
string info = "";
string json = "";
bool rbool = false;
HttpContext context;
JavaScriptSerializer jss = new JavaScriptSerializer();
Dictionary<string, object> dic = new Dictionary<string, object>();
public void ProcessRequest(HttpContext context)
{
this.context = context;
context.Response.ContentEncoding = Encoding.GetEncoding("utf-8");//避免出現亂碼
//接收瀏覽器 get/post 過來的參數cmd
string cmd = context.Request["cmd"].ToString();
switch (cmd)
{
case "userList": json = GetUserList();
break;
}
context.Response.Write(json);
}
/// <summary>
/// 獲得用戶列表
/// </summary>
/// <param name="index"></param>
/// <returns></returns>
public string GetUserList()
{
#region ===代碼===
int totalCount = 0;//所有的
int selCount = 0;//根據條件搜索到的
string sqlSel = RequestHelper.GetQueryString("strWhere");
List<t_user> list = UserDal.m_UserDal.GetList("");
totalCount = list.Count;
int draw = Common.Utils.ToInt(context.Request.Params["draw"]);
int start = Common.Utils.ToInt(context.Request.Params["start"]);
int length = Common.Utils.ToInt(context.Request.Params["length"]);
list = UserDal.m_UserDal.GetList(sqlSel, length, (start / length) + 1);
selCount = list.Count;
dic.Add("draw", draw);
dic.Add("recordsTotal", selCount);
dic.Add("recordsFiltered", totalCount);
dic.Add("data", list);
return jss.Serialize(dic);
#endregion ===代碼===
}
public bool IsReusable
{
get
{
return false;
}
}
}
}