引导可搜索分页表示例 jQuery - Javascript

本文介绍了如何使用jQuery和Javascript在网页生成一个可搜索分页的表格。

使用步骤

1. 在HTML文档中添加一个表格元素。

<table id="myTable" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>32</td>
            <td>Los Angeles</td>
        </tr>
        <tr>
            <td>Peter</td>
            <td>48</td>
            <td>Chicago</td>
        </tr>
    </tbody>
</table>

2. 在HTML文档中引入jQuery和Bootstrap库。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>

3. 编写Javascript代码，实现表格的搜索和分页功能。

$(document).ready(function(){
    // 初始化表格
    $("#myTable").DataTable({
        "paging": true,                 // 开启分页功能
        "searching": true,              // 开启搜索功能
        "ordering":  true,              // 开启排序功能
        "info":      true,              // 开启信息提示功能
        "lengthChange": true,           // 开启每页条数选择功能
        "language": {                   // 配置界面信息
            "emptyTable":     "表格中没有数据",
            "info":           "当前显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项。",
            "infoEmpty":      "没有数据",
            "infoFiltered":   "(从 _MAX_ 条记录过滤)",
            "lengthMenu":     "每页显示 _MENU_ 条记录",
            "loadingRecords": "加载中...",
            "processing":     "处理中...",
            "search":         "搜索:",
            "zeroRecords":    "没有匹配结果",
            "paginate": {
                "first":      "首页",
                "last":       "末页",
                "next":       "下一页",
                "previous":   "上一页"
            },
            "aria": {
                "sortAscending":  ":以升序排序",
                "sortDescending": ":以降序排序"
            }
        }
    });
});

4. 运行HTML文档，在浏览器中查看效果。

效果预览

总结

本文介绍了如何在网页使用jQuery和Javascript生成一个可搜索分页的表格。通过配置Datatable参数，可以实现更多的功能，如响应式布局、列排序、列搜索、列筛选等，适用于各种展示数据的场景。