datatables後臺分頁例子(可直接複製代碼)

 

1.head表籤引用

這兩個文件便可

2.複製下面的代碼到webform中的head標籤中

<script>
$(function () {
//提示信息
var lang = {
"sProcessing": "處理中...",
"sLengthMenu": "每頁 _MENU_ 項",
"sZeroRecords": "沒有匹配結果",
"sInfo": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。",
"sInfoEmpty": "當前顯示第 0 至 0 項，共 0 項",
"sInfoFiltered": "(由 _MAX_ 項結果過濾)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中數據爲空",
"sLoadingRecords": "載入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上頁",
"sNext": "下頁",
"sLast": "末頁",
"sJump": "跳轉"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
};

//初始化表格
var table = $("#example").dataTable({
language: lang, //提示信息
bSort: true,
autoWidth: false, //禁用自動調整列寬
stripeClasses: ["odd", "even"], //爲奇偶行加上樣式，兼容不支持CSS僞類的場合
processing: true, //隱藏加載提示,自行處理
serverSide: true, //啓用服務器端分頁
//aoColumnDefs: [
// { "bSortable": false, "aTargets": [0] }
//],
searching: true, //是否禁用原生搜索(false爲禁用,true爲使用)
orderMulti: false, //啓用多列排序
order: [], //取消默認排序查詢,不然複選框一列會出現小箭頭
renderer: "bootstrap", //渲染樣式：Bootstrap和jquery-ui
pagingType: "full_numbers", //分頁樣式：simple,simple_numbers,full,full_numbers
bScrollInfinite: true,
columnDefs: [{
"targets": 'nosort', //列的樣式名
"orderable": false //包含上樣式名‘nosort’的禁止排序
}],
ajax: function (data, callback, settings) {
//封裝請求參數
var param = {};
param.limit = data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候
param.start = data.start;//開始的記錄序號
param.page = (data.start / data.length) + 1;//當前頁碼
param.search = data.search.value;//搜索條件
if (data.order.length > 0) {
param.order = data.columns[data.order[0].column].data;
param.dir = data.order[0].dir;
}
console.log(param);
//ajax請求數據
$.ajax({
type: "GET",
url: "/WebForm1.aspx?Action=LoadDataList",
cache: false, //禁用緩存
data: param, //傳入組裝的參數
dataType: "json",
success: function (result) {
//console.log(result);
//setTimeout僅爲測試延遲效果
setTimeout(function () {
//封裝返回數據
var returnData = {};
returnData.draw = data.draw;//這裏直接自行返回了draw計數器,應該由後臺返回
returnData.recordsTotal = result.total;//返回數據所有記錄
returnData.recordsFiltered = result.total;//後臺不實現過濾功能，每次查詢均視做所有結果
returnData.data = result.data;//返回的數據列表
console.log(returnData);
//調用DataTables提供的callback方法，表明數據已封裝完成並傳回DataTables進行渲染
//此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢
callback(returnData);
}, 200);
}
});
},
//列表表頭字段
columns: [
{ "data": "Id" },
{ "data": "Name" },
{ "data": "Age" }
]
}).api();
//此處需調用api()方法,不然返回的是JQuery對象而不是DataTables的API對象
});
</script>

3.在form標籤中複製如下代碼

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</tfoot>
</table>

4.在webform後臺中複製如下代碼

string action = Request.Params["Action"];
if (!string.IsNullOrEmpty(action) && action.Equals("LoadDataList"))
{
int page = !string.IsNullOrEmpty(Request.Params["page"]) ? Convert.ToInt32(Request.Params["page"]) : 1;
int limit = !string.IsNullOrEmpty(Request.Params["limit"]) ? Convert.ToInt32(Request.Params["limit"]) : 1;
int start = !string.IsNullOrEmpty(Request.Params["start"]) ? Convert.ToInt32(Request.Params["start"]) : 0;
//搜索的條件
string search = Request.Params["search"];
//排序的字段名稱
string order = Request.Params["order"];
//排序類型
string dir = Request.Params["dir"];

#region 獲取符合查詢條件的數據集合
List<Student> listData = new List<Student>();
for (int i = 0; i < list.Count; i++)
{
if (string.IsNullOrEmpty(search))
{
listData.Add(list[i]);
}
else
{
if (list[i].Name.Contains(search))
{
listData.Add(list[i]);
}
}
}
#endregion
//排序,我這裏寫死了根據名稱排序
if (!string.IsNullOrEmpty(order) && !string.IsNullOrEmpty(dir))
{
if (dir.Equals("asc"))
{
listData = listData.OrderBy(a => a.Name).ToList();
}
else
{
listData = listData.OrderByDescending(a => a.Name).ToList();
}
}

//獲取datatables要查詢幾條數據的數據集合
List<Student> listData1 = new List<Student>();
for (int i = (page - 1) * limit; i < page * limit; i++)
{
if (i >= listData.Count)
{
break;
}
listData1.Add(listData[i]);
}
var data1 = new
{
total = listData.Count,
page = 5,
limit = 10,
data = listData1
};
string jsonData = JsonConvert.SerializeObject(data1);
Response.Write(jsonData);
Response.End();
}

5.在方法外面添加一個這樣的集合

List<Student> list = new List<Student>() {
new Student(){ Id = 1, Name = "彭文峯", Age = 20 },
new Student(){ Id = 2, Name = "李寶明", Age = 22 },
new Student(){ Id = 3, Name = "賴道興", Age = 24 },
new Student(){ Id = 4, Name = "唐靜", Age = 23 },
new Student(){ Id = 5, Name = "李團全", Age = 21 },

new Student(){ Id = 6, Name = "蒙志英", Age = 20 },
new Student(){ Id = 7, Name = "鍾志敏", Age = 22 },
new Student(){ Id = 8, Name = "彭永慶", Age = 24 },
new Student(){ Id = 9, Name = "戴曦", Age = 23 },
new Student(){ Id = 10, Name = "韋宗辰", Age = 21 },

new Student(){ Id = 6, Name = "蒙志英", Age = 20 },
new Student(){ Id = 7, Name = "鍾志敏", Age = 22 },
new Student(){ Id = 8, Name = "彭永慶", Age = 24 },
new Student(){ Id = 9, Name = "戴曦", Age = 23 },
new Student(){ Id = 10, Name = "韋宗辰", Age = 21 },

new Student(){ Id = 6, Name = "蒙志英", Age = 20 },
new Student(){ Id = 7, Name = "鍾志敏", Age = 22 },
new Student(){ Id = 8, Name = "彭永慶", Age = 24 },
new Student(){ Id = 9, Name = "戴曦", Age = 23 },
new Student(){ Id = 10, Name = "韋宗辰", Age = 21 },

new Student(){ Id = 11, Name = "彭宇雲", Age = 20 },
new Student(){ Id = 12, Name = "鍾善貴", Age = 22 },
new Student(){ Id = 13, Name = "邱明明", Age = 24 },
new Student(){ Id = 14, Name = "黃吉良", Age = 23 },
new Student(){ Id = 15, Name = "梁輝傑", Age = 21 }
};

基本上就OK了惟一要改估計就是那個ajax請求的路徑了