中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

jQuery dataTables 插件是一個(gè)優(yōu)秀的表格插件，是后臺工程師的福音！它提供了針對數(shù)據(jù)表格的排序、瀏覽器分頁、服務(wù)器分頁、查詢、格式化等功能。dataTables 官網(wǎng)也提供了大量的演示和詳細(xì)的文檔進(jìn)行說明，為了方便使用，這里進(jìn)行詳細(xì)說明。

去官網(wǎng)：https://www.datatables.net/ 下載最新版本是v1.10.12。

在頁面引入:

<link rel="stylesheet" href="~/Content_Admin/css/bootstrap.min.css" />

<link rel="stylesheet" href="~/Content_Admin/css/bootstrap-responsive.min.css" />

<script type="text/javascript" src="~/Content_Admin/js/jquery.min.js"></script>

<script type="text/javascript" src="~/Content_Admin/js/bootstrap.min.js"></script>

<script type="text/javascript" src="~/Content_Admin/js/jquery.dataTables.min.js"></script>

HTML代碼： 寫上<thead></thead>標(biāo)頭即可

<div class="widget-content nopadding">

<table id="archives-table" class="table table-bordered data-table mydatatable">

<thead>

<tr>

<th>編號</th>

<th>標(biāo)題</th>

<th>所屬類別</th>

<th>瀏覽量</th>

<th>評論量</th>

<th>點(diǎn)贊量</th>

<th>狀態(tài)</th>

<th>操作</th>

<th>操作</th>

<th>操作</th>

</tr>

</thead>

<tbody></tbody>

</table>

</div>

客戶端jQuery：

$('#archives-table').dataTable({

"oLanguage": {

//國際化

"sProcessing": "<img src='/Content_Admin/img/spinner.gif'> 努力加載數(shù)據(jù)中...",

"sLengthMenu": "每頁顯示 _MENU_  條結(jié)果",

"sZeroRecords": "沒有匹配結(jié)果",

"sInfo": "總共_PAGES_ 頁，顯示第_START_ 到第 _END_ ，篩選之后得到 _TOTAL_ 條，初始_MAX_ 條 ",

"infoEmpty": "0條記錄", //篩選為空時(shí)左下角的顯示"

"sInfoEmpty": "沒有數(shù)據(jù)",

"sInfoFiltered": "(從_MAX_條數(shù)據(jù)中檢索)",//篩選之后的左下角篩選提示，

"sZeroRecords": "沒有檢索到數(shù)據(jù)",

//"sSearch": '<span class="label label-success"> 搜索 </span>'

},

//"bServerSide": false, //第一種場景:服務(wù)端一次性取出所有數(shù)據(jù),完全由客戶端來處理這些數(shù)據(jù).此時(shí)為false

"bServerSide": true, //第二種場景:服務(wù)端處理分頁后數(shù)據(jù),客戶端呈現(xiàn),此時(shí)為true.但此時(shí)aoColumns要變,將'sName'換成mDataProp,同時(shí)自定義列也要有對應(yīng)的數(shù)據(jù)

"sServerMethod": "GET",

"sAjaxSource": "/Admin/AdminArchives/GetArchivesJson", //ajax Url地址

"bProcessing": true,

"bPaginate": true,

"sPaginationType": "full_numbers",

"bJQueryUI": true, //客戶端傳給服務(wù)器的參數(shù)為sSearch

'bFilter': false,

//'bsearch':true,

'bLengthChange': true,

'aLengthMenu': [

[5, 15, 20, -1],

[5, 15, 20, "全部"] // change per page values here

],

'iDisplayLength': 7, //每頁顯示10條記錄

'bAutoWidth': true,

"scrollX": true,

"aoColumns": [

{ "sWidth": "5%", "mDataProp": "Id" },

{

"sWidth": "40%",

"mDataProp": "Title",

"mRender": function (data, type, row) {

return '<a href="/Archives/Index/' + row.Id + '\">' + data + '</a>';

}

},

{ "sWidth": "10%", "mDataProp": "CategoryName" },

{ "sWidth": "6%", "mDataProp": "ViewCount", "bStorable": true },

{ "sWidth": "6%", "mDataProp": "CommentCount", "bStorable": true },

{ "sWidth": "6%", "mDataProp": "Digg", "bStorable": true },

{

"sWidth": "6%",

"mDataProp": "Status",

"mRender": function (data, type, row) {

var value = "已發(fā)布";

if (data == "0")

value = "禁用";

return value;

}

},

{ //自定義列 : 啟用/禁用

"mDataProp": "null",

"sWidth": "6%",

"bSearchable": false,

"bStorable": false,

"mRender": function (data, type, row) {

var actionstr = '<a id="publicarticle" class="publicaction" target-id="' + row.Id + '" href="#">發(fā) 布</a>';

if (row.Status == "1")

actionstr = '<a id="delarticle" class="delaction" target-id="' + row.Id + '" href="#">禁 用</a>';

return actionstr;

}

},

{ //自定義列 : real刪除

"mDataProp": "null",

"sWidth": "6%",

"bSearchable": false,

"bStorable": false,

"mRender": function (data, type, row) {

return '<a id="realdelarticle" class="tip" target-id="' + row.Id + '" href="#"><i class="icon-remove"></i></a>';

}

},

{ //自定義列：編輯

"mDataProp": "null",

"sWidth": "6%",

"bSearchable": false,

"bStorable": false,

"mRender": function (data, type, row) {

return '<a class="tip" href="/Admin/AdminArchives/EditArchive/' + row.Id + '"><i class="icon-pencil"></i></a>';

}

}

],

"aoColumnDefs": [

{

//報(bào)錯(cuò)：DataTables warning : Requested unknown parameter '1' from the data source for row 0

//加上這段定義就不出錯(cuò)了。

sDefaultContent: '',

aTargets: ['_all']

}

]

});

Jquery.DataTables插件的兩種應(yīng)用場景

場景一：服務(wù)端一次性取出所有數(shù)據(jù),完全由客戶端來處理這些數(shù)據(jù).此時(shí)"bServerSide": false,

服務(wù)端代碼:

public JsonResult GetArchivesJson(jqDataTableParameter tableParam)

{

#region 1.0 場景一

////1. 獲取所有文章

//List<Article> DataSource = articleService.GetDataListBy(a => true, a => a.Id);

////2. 構(gòu)造aaData

//var data = DataSource.Select(a => new object[]{

// a.Id,

// a.Title+ " ("+a.SubTime.ToString()+")",

// (categoryService.GetDataListBy(c=>c.Id==a.CategoryId)[0]).Name,

// a.ViewCount,

// commentService.GetDataListBy(c=>c.CmtArtId==a.Id).Count,

// a.Digg,

// a.Status==1?"正常":"刪除"

//});

////3. 返回json,aaData是一個(gè)數(shù)組，數(shù)組里面還是字符串?dāng)?shù)組

//return Json(new

//{

// sEcho = 1,

// iTotalRecords = DataSource.Count,

// iTotalDisplayRecords = data.Count(),

// aaData = data

//}, JsonRequestBehavior.AllowGet); 

#endregion

}

public JsonResult GetArchivesJson(jqDataTableParameter tableParam)

場景二：服務(wù)端處理分頁后數(shù)據(jù),客戶端呈現(xiàn),此時(shí)為true，

服務(wù)端代碼:

public JsonResult GetArchivesJson(jqDataTableParameter tableParam)

{

#region 2.0 場景二

//客戶端需要"bServerSide": true, 用mDataProp綁定字段,obj.aData.Id獲取字段(.屬性)

//0.0 全部數(shù)據(jù)

List<Article> DataSource = articleService.GetDataListBy(a => true);

//DataSource = DataSource.OrderByDescending(a => a.SubTime).ToList();

//1.0 首先獲取datatable提交過來的參數(shù)

string echo = tableParam.sEcho; //用于客戶端自己的校驗(yàn)

int dataStart = tableParam.iDisplayStart;//要請求的該頁第一條數(shù)據(jù)的序號

int pageSize = tableParam.iDisplayLength == -1 ? DataSource.Count : tableParam.iDisplayLength;//每頁容量（=-1表示取全部數(shù)據(jù)）

string search = tableParam.sSearch;

//2.0 根據(jù)參數(shù)(起始序號、每頁容量、參訓(xùn)參數(shù))查詢數(shù)據(jù)

if (!String.IsNullOrEmpty(search))

{

var data = DataSource.Where(a => a.Title.Contains(search) ||

a.Keywords.Contains(search) ||

a.Contents.Contains(search))

.Skip<Article>(dataStart)

.Take(pageSize)

.Select(a => new

{

Id = a.Id,

Title = a.Title + " (" + a.SubTime.ToString() + ")",

CategoryName = a.Category.Name,

ViewCount = a.ViewCount,

CommentCount = commentService.GetDataListBy(c => c.CmtArtId == a.Id).Count,

Digg = a.Digg,

Status = a.Status

}).ToList();

//3.0 構(gòu)造datatable所需要的數(shù)據(jù)json對象...aaData里面應(yīng)是一個(gè)二維數(shù)組：即里面是一個(gè)數(shù)組[["","",""],[],[],[]]

return Json(new

{

sEcho = echo,

iTotalRecords = DataSource.Count(),

iTotalDisplayRecords = DataSource.Count(),

aaData = data

}, JsonRequestBehavior.AllowGet);

}

else

{

var data = DataSource.Skip<Article>(dataStart)

.Take(pageSize)

.Select(a => new

{

Id = a.Id,

Title = a.Title + " (" + a.SubTime.ToString() + ")",

CategoryName = a.Category.Name,

ViewCount = a.ViewCount,

CommentCount = commentService.GetDataListBy(c => c.CmtArtId == a.Id).Count,

Digg = a.Digg,

Status = a.Status

}).ToList();

//3.0 構(gòu)造datatable所需要的數(shù)據(jù)json對象...aaData里面應(yīng)是一個(gè)二維數(shù)組：即里面是一個(gè)數(shù)組[["","",""],[],[],[]]

return Json(new

{

sEcho = echo,

iTotalRecords = DataSource.Count(),

iTotalDisplayRecords = DataSource.Count(),

aaData = data

}, JsonRequestBehavior.AllowGet);

}

#endregion

}

public JsonResult GetArchivesJson(jqDataTableParameter tableParam)

其中dataTables發(fā)送的參數(shù)被分裝在jqDataTableParameter.cs中：

/// <summary>

/// 在服務(wù)器端,可以通過以下請求參數(shù)來獲得當(dāng)前客戶端的操作信息

/// jquery $('selector').datatable()插件 參數(shù)model

/// </summary>

public class jqDataTableParameter

{

/// <summary>

/// 1.0 DataTable用來生成的信息

/// </summary> 

public string sEcho { get; set; }

/// <summary>

/// 2.0分頁起始索引

/// </summary>

public int iDisplayStart { get; set; }

/// <summary>

/// 3.0每頁顯示的數(shù)量

/// </summary>

public int iDisplayLength { get; set; }

/// <summary>

/// 4.0搜索字段

/// </summary>

public string sSearch { get; set; }

/// <summary>

/// 5.0列數(shù)

/// </summary>

public int iColumns { get; set; }

/// <summary>

/// 6.0排序列的數(shù)量

/// </summary>

public int iSortingCols { get; set; }

/// <summary>

/// 7.0逗號分割所有的列

/// </summary>

public string sColumns { get; set; }

}

public class jqDataTableParameter

以上就是對datatable插件的使用說明。

以上所述是小編給大家介紹的利用ASP.NET MVC和Bootstrap快速搭建個(gè)人博客之后臺dataTable數(shù)據(jù)列表，希望對大家有所幫助