datatable 服務端分頁
因項目需求變動，需處理大量數據，更改成服務端分頁，自己兩天的學習筆記
先上圖【 jqueryui風格】
前端代碼：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Scripts/DataTables-1.10.7/css/select.dataTables.min.css" rel="stylesheet" />
<link href="~/Scripts/DataTables-1.10.7/css/jquery.dataTables.css" rel="stylesheet" />
<link href="~/Scripts/framework/plugins/jqueryui/lxwJQueryUI.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/framework/plugins/jqueryui/jquery-ui.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/DataTables-1.10.7/js/jquery.dataTables.js"></script>
<script src="~/Scripts/DataTables-1.10.7/js/dataTables.select.js"></script>
<style>
/*.selected {
background-color: #eed3d2 !important;
}*/
</style>
</head>
<body>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">查詢</h3>
</div>
<div class="panel-body">
</div>
</div>
<div class="widget-content nopadding">
<table id="archivestable" class="table table-bordered data-table mydatatable ">
<thead>
<tr>
<th>編號</th>
<th>標題</th>
<th>內容</th>
<th>瀏覽量</th>
<th>狀態</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
var table;
table = $('#archivestable').dataTable({
"bJQueryUI": true, //是否使用 jQury的UI theme
"language": {
"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": "末頁"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
},
"deferRender": true
},
"bRetrieve": "true",
"responsive": "true",
"paging": "true",
"bServerSide": true, //:服務端處理分頁后數據,客戶端呈現,此時為true.但此時aoColumns要變,將'sName'換成mDataProp,同時自定義列也要有對應的數據
//"sServerMethod": "GET",//老版本提交方式
//"sAjaxSource": "/Home/GetNesList", //ajax Url地址
"ajax": {
"url": "/Home/GetNesList",
"type": "POST"
},
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
'bFilter': false,//關閉搜索
'bsearch': false,
"aLengthMenu": [6, 8, 10, 20, 50],
"iDisplayLength": 8,
"iDisplayStart": 0,
'bAutoWidth': true,
"aoColumns": [
{ "data": "Id" },
{ "data": "Title" },
{ "data": "NewsContent" },
{ "data": "DCount" },
{ "data": "Status" },
{ "data": null },
],
"aoColumnDefs": [
{
"targets": [4],
"searchable": false,
"render": function (data, type, row) {
if (data == 0)
return '禁用';
else
return '可用';
}
}, {
sDefaultContent: '',
aTargets: ['_all']
}
]
});
////表格行點擊設置選中樣式
$("#archivestable tbody").on("click", "tr", function () {
var $curr = $(this);
if ($curr.hasClass("selected")) {
$curr.removeClass("selected");
}
else {
table.$("tr.selected").removeClass("selected");
$curr.addClass("selected");
}
});
});
</script>
</body>
</html>
后端：實體類
/// <summary>
/// 臨時新聞類
/// </summary>
public class News
{
public int Id { get; set; }
public string Title { get; set; }
public string NewsContent { get; set; }
public int DCount { get; set; }
public int Status { get; set; }
}
/// <summary>
///分頁類處理
/// </summary>
public class DataTableParameter
{
/// <summary>
/// 1.0 DataTable用來生成的信息
/// </summary>
public string sEcho { get; set; }
/// <summary>
/// 2.0分頁起始索引
/// </summary>
public int Start { get; set; }
/// <summary>
/// 3.0每頁顯示的數量
/// </summary>
public int Length { get; set; }
/// <summary>
/// 4.0搜索字段
/// </summary>
public string search { get; set; }
/// <summary>
/// 5.0列數
/// </summary>
public int iColumns { get; set; }
/// <summary>
/// 6.0排序列的數量
/// </summary>
public int iSortingCols { get; set; }
/// <summary>
/// 7.0逗號分割所有的列
/// </summary>
public string sColumns { get; set; }
}
數據源：
/// <summary>
/// 生成數據源
/// </summary>
/// <returns></returns>
public List<News> Getlist()
{
List<News> myLsit = new List<News>();
for (int i = 0; i < 300; i++)
{
if (i % 2 == 0)
{
myLsit.Add(new News { Id = i, Title = "ceshi", NewsContent = "哈哈" + i, DCount = 20, Status = 0 });
}
else
{
myLsit.Add(new News { Id = i, Title = "ceshi", NewsContent = "哈哈" + i, DCount = 20, Status = 1 });
}
}
return myLsit;
}
//控制器代碼
public JsonResult GetNesList(DataTableParameter tp)
{
#region
//1 獲取數據源
List<News> DataSource = Getlist();
//DataSource = DataSource.OrderByDescending(a => a.SubTime).ToList();
//2 處理頁數
string echo = tp.sEcho; //用於客戶端自己的校驗
int dataStart = tp.Start;//開始頁數
int pageSize = tp.Length == -1 ? DataSource.Count : tp.Length;//總頁數
string search = tp.search;
//3 是否有搜索框條件，【因為版本問題，暫時沒有實現】
if (!String.IsNullOrEmpty(search))
{
var data = DataSource.Where(a => a.Title.Contains(search) ||
a.NewsContent.Contains(search))
.Skip<News>(dataStart)
.Take(pageSize)
.ToList();
return Json(new
{
sEcho = echo,
iTotalRecords = DataSource.Count(),
iTotalDisplayRecords = DataSource.Count(),
aaData = data
}, JsonRequestBehavior.AllowGet);
}
else
{
var data = DataSource.Skip<News>(dataStart)
.Take(pageSize)
.ToList();
return Json(new
{
sEcho = echo,
iTotalRecords = DataSource.Count(),
iTotalDisplayRecords = DataSource.Count(),
aaData = data
}, JsonRequestBehavior.AllowGet);
}
#endregion
}
第一次寫，代碼很糟糕