jquery dataTable does not load data to achieve only paging

Note: This article is the use of jstl dynamic load data directly rather than using dataTable load data, datatable only provide paging support

The first step: Import documents

<!--引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

Step Two: id or added to the table tag class

<table id="user_table" border="1"></table>

The third step: initialization datatable, custom configuration

$("#user_table").dataTable({

        //关闭搜索框
        "searching": false,

        //关闭排序
        ordering: false,

        //允许分页
        "paging":true,
        //支持国际化，将显示文字转为中文
        language:{
            //执行状态
            "sProcessing" : "处理中...",
            //左上角选择每页数量
            "sLengthMenu" : "每页 _MENU_ 条记录",
            //左下角总数和当前页
            "sInfo" : "第 _PAGE_ 页 ( 总共 _PAGES_ 页，_TOTAL_ 条记录 )",
            "sInfoEmpty" : "无记录",
            // "search": "搜索：",
            "oPaginate" : {
                "sFirst" : "首页",
                "sPrevious" : "上页",
                "sNext" : "下页",
                "sLast" : "末页"
            }
        }
    });

Codes attached to the front end of the main Bo:

<%@ page contentType="text/html;charset=UTF-8"
         language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>

    <!--引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
    
    <style>
        .main{
            width: 960px;
            margin: 20px auto;
        }
        #user_table td{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="main">
        <table id="user_table" border="1">
            <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>sex</th>
                <th>password</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${users}" var="user">
                <tr>
                    <td>${user.userId}</td>
                    <td>${user.userName}</td>
                    <td>${user.age}</td>
                    <td>${user.sex}</td>
                    <td>${user.password}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</body>

<script>
$(function () {
    $("#user_table").dataTable({

        //关闭搜索框
        "searching": false,

        //关闭排序
        ordering: false,

        //允许分页
        "paging":true,
        //支持国际化，将显示文字转为中文
        language:{
            //执行状态
            "sProcessing" : "处理中...",
            //左上角选择每页数量
            "sLengthMenu" : "每页 _MENU_ 条记录",
            //左下角总数和当前页
            "sInfo" : "第 _PAGE_ 页 ( 总共 _PAGES_ 页，_TOTAL_ 条记录 )",
            "sInfoEmpty" : "无记录",
            //右下角按钮
            "oPaginate" : {
                "sFirst" : "首页",
                "sPrevious" : "上页",
                "sNext" : "下页",
                "sLast" : "末页"
            }
        }
    });
})
</script>
</html>

Achieve results:

More datatable plugin to see the related use: DataTable official documents

Feng Yu bloodstain

Published 95 original articles · won praise 43 · views 70000 +

Private letter concerns

jquery dataTable does not load data to achieve only paging

Guess you like