利用ASP.NET MVC和Bootstrap快速搭建個(gè)人博客之后臺(tái)dataTable數(shù)據(jù)列表
jQuery dataTables 插件是一個(gè)優(yōu)秀的表格插件,是后臺(tái)工程師的福音!它提供了針對(duì)數(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>編號(hào)</th> <th>標(biāo)題</th> <th>所屬類別</th> <th>瀏覽量</th> <th>評(píng)論量</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í)自定義列也要有對(duì)應(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;//要請(qǐng)求的該頁第一條數(shù)據(jù)的序號(hào) int pageSize = tableParam.iDisplayLength == -1 ? DataSource.Count : tableParam.iDisplayLength;//每頁容量(=-1表示取全部數(shù)據(jù)) string search = tableParam.sSearch; //2.0 根據(jù)參數(shù)(起始序號(hào)、每頁容量、參訓(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對(duì)象...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對(duì)象...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ù)器端,可以通過以下請(qǐng)求參數(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逗號(hào)分割所有的列 /// </summary> public string sColumns { get; set; } } public class jqDataTableParameter
后臺(tái)效果展示:
以上就是對(duì)datatable插件的使用說明。
以上所述是小編給大家介紹的利用ASP.NET MVC和Bootstrap快速搭建個(gè)人博客之后臺(tái)dataTable數(shù)據(jù)列表,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
ASP.NET MVC中異常處理&自定義錯(cuò)誤頁詳析
當(dāng)ASP.NET MVC程序出現(xiàn)了異常,怎么處理更加規(guī)范?下面這篇文章主要給大家介紹了關(guān)于ASP.NET MVC中異常處理&自定義錯(cuò)誤頁的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04c#.net 動(dòng)態(tài)讀取 走馬燈代碼實(shí)例分享
c#.net 動(dòng)態(tài)讀取 走馬燈代碼實(shí)例分享,需要的朋友可以參考一下2013-06-06asp.net 實(shí)現(xiàn)靜態(tài)頁面累加訪問量的三種方式
asp.net 實(shí)現(xiàn)靜態(tài)頁面累加訪問量的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-03-03使用vs2019加.net core 對(duì)WeiApi的創(chuàng)建過程詳解
這篇文章主要介紹了使用vs2019加.net core 對(duì)WeiApi的創(chuàng)建,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07asp.net上傳圖片并作處理水印與縮略圖的實(shí)例代碼
asp.net 上傳圖片并作處理(生成縮略圖 、在圖片上增加文字水印、在圖片上生成圖片水?。┑膶?shí)例代碼,經(jīng)過測(cè)試!2013-06-06