ABP进阶教程4 - 分页排序

点这里进入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();
} );

预览效果

基本的分页/排序就出来了．