11.17 文章列表分页搜索

为了方便检索我们的博客文章，我们再来给文章列表页面添加分页、搜索、排序等功能。我们使用前端组件DataTables来实现。

提示：更多关于DataTables，可参考： http://www.datatables.club/

11.17.1 引入静态资源文件

<link href="/datatables/media/css/jquery.dataTables.css" rel="stylesheet">
<script src="/datatables/media/js/jquery.dataTables.js"></script>

11.17.2 给表格加上id

我们给表格加个属性id=”articlesDataTable” ：

<table id="articlesDataTable" class="table table-responsive table-bordered">
    <thead>
    <th>序号</th>
    <th>标题</th>
    <th>作者</th>
    <th>发表时间</th>
    <th>操作</th>
    </thead>
    <tbody>
    <#-- 使用FTL指令 -->
    <#list articles as article>
    <tr>
        <td>${article.id}</td>
        <td><a target="_blank" href="detailArticleView?id=${article.id}">${article.title}</a></td>
        <td>${article.author}</td>
        <td>${article.gmtModified}</td>
        <td><a href="#" target="_blank">编辑</a></td>
    </tr>
    </#list>
    </tbody>
</table>

11.17.3 调用DataTable函数

首先，我们配置一下DataTable的选项：

var aLengthMenu = [7, 10, 20, 50, 100, 200]
var dataTableOptions = {
    "bDestroy": true,
    dom: 'lfrtip',
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    "processing": true,
    "stateSave": true,
    responsive: true,
    fixedHeader: false,
    order: [[1, "desc"]],
    "aLengthMenu": aLengthMenu,
    language: {
        "search": "<div style='border-radius:10px;margin-left:auto;margin-right:2px;width:760px;'>_INPUT_  <span class='btn btn-primary'><span class='fa fa-search'></span> 搜索</span></div>",
        paginate: {//分页的样式内容
            previous: "上一页",
            next: "下一页",
            first: "第一页",
            last: "最后"
        }
    },
    zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
    //下面三者构成了总体的左下角的内容。
    info: "总计 _TOTAL_ 条,共 _PAGES_ 页，_START_ - _END_ ",//左下角的信息显示，大写的词为关键字。
    infoEmpty: "0条记录",//筛选为空时左下角的显示。
    infoFiltered: ""//筛选之后的左下角筛选提示
}

然后把我们刚才添加了id的表格使用JQuery选择器获取对象，然后直接调用：

$('#articlesDataTable').DataTable(dataTableOptions)

再次看我们的文章列表页：

已经具备了分页、搜索、排序等功能了。

到这里，我们的这个较为完整的极简博客站点应用基本就开发完成了。