點這裡進入ABP進階教程目錄 

下載插件

打開Datatables官網(https://datatables.net/download/)

下載插件，複製到JD.CRS.Web.Mvc\wwwroot\lib\dataTables目錄．

這兩個主文件必選，其他的看著選吧．

jquery.dataTables.js

jquery.dataTables.css

引入插件

打開展示層(即JD.CRS.Web.Mvc)的Views/Course/Index.cshtml //Course查詢視圖

添加兩行代碼，引入插件．

<link href="~/lib/dataTables/DataTables/css/jquery.dataTables.css" rel="stylesheet" asp-append-version="true" />
<script src="~/lib/dataTables/DataTables/js/jquery.dataTables.js" asp-append-version="true"></script>

更新視圖

打開展示層(即JD.CRS.Web.Mvc)的Views/Course/Index.cshtml //Course查詢視圖

把要用到插件的<table>加上ID

<table id="dataTable" class="table">

更新腳本

打開展示層(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Course查詢相關腳本

綁定插件

$(document).ready( function () {
    $('#dataTable').DataTable();
} );

預覽效果

基本的分頁/排序就出來了．