利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台

jQuery dataTables 插件是一个优秀的表格插件，是后台工程师的福音！它提供了针对数据表格的排序、浏览器分页、服务器分页、查询、格式化等功能。dataTables 官网也提供了大量的演示和详细的文档进行说明，为了方便使用，这里进行详细说明。

去官网：https://www.datatables.net/ 下载最新版本是v1.10.12。

在页面引入:

<link href="https://www.jb51.net/~/Content_Admin/css/bootstrap.min.css" /> <link href="https://www.jb51.net/~/Content_Admin/css/bootstrap-responsive.min.css" /> <script type="text/javascript" src="https://www.jb51.net/~/Content_Admin/js/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/~/Content_Admin/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/~/Content_Admin/js/jquery.dataTables.min.js"></script>

HTML代码： 写上<thead></thead>标头即可

<div> <table> <thead> <tr> <th>编号</th> <th>标题</th> <th>所属类别</th> <th>浏览量</th> <th>评论量</th> <th>点赞量</th> <th>状态</th> <th>操作</th> <th>操作</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> </div>

客户端jQuery：

$('#archives-table').dataTable({ "oLanguage": { //国际化 "sProcessing": "<img src='https://www.jb51.net/Content_Admin/img/spinner.gif'> 努力加载数据中...", "sLengthMenu": "每页显示&nbsp;_MENU_ &nbsp;条结果", "sZeroRecords": "没有匹配结果", "sInfo": "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ", "infoEmpty": "0条记录", //筛选为空时左下角的显示" "sInfoEmpty": "没有数据", "sInfoFiltered": "(从_MAX_条数据中检索)",//筛选之后的左下角筛选提示， "sZeroRecords": "没有检索到数据", //"sSearch": '<span>&nbsp;搜索&nbsp;</span>' }, //"bServerSide": false, //第一种场景:服务端一次性取出所有数据,完全由客户端来处理这些数据.此时为false "bServerSide": true, //第二种场景:服务端处理分页后数据,客户端呈现,此时为true.但此时aoColumns要变,将'sName'换成mDataProp,同时自定义列也要有对应的数据 "sServerMethod": "GET", "sAjaxSource": "/Admin/AdminArchives/GetArchivesJson", //ajax Url地址 "bProcessing": true, "bPaginate": true, "sPaginationType": "full_numbers", "bJQueryUI": true, //客户端传给服务器的参数为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 = "已发布"; if (data == "0") value = "禁用"; return value; } }, { //自定义列 : 启用/禁用 "mDataProp": "null", "sWidth": "6%", "bSearchable": false, "bStorable": false, "mRender": function (data, type, row) { var actionstr = '<a target-id="' + row.Id + '" href="#">发 布</a>'; if (row.Status == "1") actionstr = '<a target-id="' + row.Id + '" href="#">禁 用</a>'; return actionstr; } }, { //自定义列 : real删除 "mDataProp": "null", "sWidth": "6%", "bSearchable": false, "bStorable": false, "mRender": function (data, type, row) { return '<a target-id="' + row.Id + '" href="#"><i></i></a>'; } }, { //自定义列：编辑 "mDataProp": "null", "sWidth": "6%", "bSearchable": false, "bStorable": false, "mRender": function (data, type, row) { return '<a href="/Admin/AdminArchives/EditArchive/' + row.Id + '"><i></i></a>'; } } ], "aoColumnDefs": [ { //报错：DataTables warning : Requested unknown parameter '1' from the data source for row 0 //加上这段定义就不出错了。 sDefaultContent: '', aTargets: ['_all'] } ] });

Jquery.DataTables插件的两种应用场景

场景一：服务端一次性取出所有数据,完全由客户端来处理这些数据.此时"bServerSide": false,

服务端代码: