layui+jquery支持IE8的表格分页方法-Java开发

下面为您详细讲解“layui+jquery支持IE8的表格分页方法”的完整攻略。

下面为您详细讲解“layui+jquery支持IE8的表格分页方法”的完整攻略。

简介

Layui是一款轻量级的前端UI框架，兼容性良好，但官方仅支持IE10以上版本。有时候我们需要兼容低版本的IE浏览器，本文就是讲解使用layui+jquery实现支持IE8的表格分页方法。

准备工作

引入Layui和jquery库；
定义表格结构，设置表头等；
引入分页组件laypage。

实现分页功能

获取数据

为了实现分页功能，我们需要从后端获取数据。以下是通过ajax获取数据的示例代码。

$.ajax({
    url: 'url/to/data',
    success: function (data) {
        // 将数据存入全局变量中
        tableData = data;
        // 渲染表格
        renderTable(tableData, 1, pageSize);
     }
})

渲染表格

渲染表格时，我们可以通过jquery来动态构建表格的DOM结构，在此不再赘述。以下是一个简单的示例：

// 渲染表格
function renderTable(data, curr, limit){
    var html = '';
    $.each(data, function(index, item){
        // 构建表格行
        var tr = '';
        tr += '<tr>';
        tr += '<td>'+ item.id +'</td>';
        tr += '<td>'+ item.name +'</td>';
        tr += '<td>'+ item.age +'</td>';
        tr += '</tr>';
        html += tr;
    });
    $('#tableBody').html(html);
}

初始化分页组件

初始化分页组件Laypage时，需要传入以下参数：

elem：容器ID；
count：总数；
limit：每页显示的数量；
curr：当前页；
jump：回调函数。

以下是一个示例：

var laypageHTML = $('#laypage');
laypage({
    elem: laypageHTML[0],
    count: tableData.length,
    limit: pageSize,
    curr: currPage,
    theme: '#1E9FFF',
    jump: function (obj, first) {
        if (!first) {
            currPage = obj.curr;
            renderTable(tableData, currPage, pageSize);
        }
    }
});

注意事项：

我们使用了jquery选择器来获取容器ID，注意要使用[0]来获取DOM对象；
jump回调函数的第一个参数是分页组件生成的参数对象，可以通过obj.curr和obj.limit获取当前页码和每页显示数量；
由于分页组件Laypage需要实现异步请求，因此必须将渲染表格和执行分页的方法放在回调函数里。

到这里，我们用layui和jquery实现支持IE8的表格分页方法就完成了。

示例

以下是两个示例：

基于静态数据的分页

以下代码是一个基于静态数据的分页示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>layui+jquery支持IE8的表格分页方法</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body{margin: 20px;}
        .tableWrap{margin-top: 20px;}
        .tableWrap table{width: 100%;}
        .tableWrap th{text-align: center;}
        .tableWrap td{text-align: center;}
    </style>
</head>
<body>

<div id="tableWrap" class="tableWrap">
    <table class="layui-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>
</div>

<div id="laypage"></div>

<script src="./layui/layui.js"></script>
<script src="./jquery-1.11.3.min.js"></script>
<script>
$(function(){
    // 假数据
    var data = [
        {id: 1, name: '张三', age: 21},
        {id: 2, name: '李四', age: 22},
        {id: 3, name: '王五', age: 23},
        {id: 4, name: '赵六', age: 24},
        {id: 5, name: '杨七', age: 25},
        {id: 6, name: '刘八', age: 26},
        {id: 7, name: '孙九', age: 27},
        {id: 8, name: '吴十', age: 28},
        {id: 9, name: '朱一', age: 29}
    ];

    var currPage = 1;
    var pageSize = 3;
    var tableData = [];

    // 渲染表格
    function renderTable(data, curr, limit){
        var html = '';
        $.each(data, function(index, item){
            // 构建表格行
            var tr = '';
            tr += '<tr>';
            tr += '<td>'+ item.id +'</td>';
            tr += '<td>'+ item.name +'</td>';
            tr += '<td>'+ item.age +'</td>';
            tr += '</tr>';
            html += tr;
        });
        $('#tableBody').html(html);
    }

    // 分页
    function setPagination(){
        var laypageHTML = $('#laypage');
        laypage({
            elem: laypageHTML[0],
            count: data.length,
            limit: pageSize,
            curr: currPage,
            theme: '#1E9FFF',
            jump: function (obj, first) {
                if (!first) {
                    currPage = obj.curr;
                    renderTable(data.slice((currPage-1)*pageSize, currPage*pageSize), currPage, pageSize);
                }
            }
        });
    }

    // 初始化表格和分页
    function init(){
        renderTable(data.slice(0, pageSize), 1, pageSize);
        setPagination();
    }

    init();
});
</script>
</body>
</html>

基于异步数据的分页

以下代码是一个基于异步数据的分页示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>layui+jquery支持IE8的表格分页方法</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body{margin: 20px;}
        .tableWrap{margin-top: 20px;}
        .tableWrap table{width: 100%;}
        .tableWrap th{text-align: center;}
        .tableWrap td{text-align: center;}
    </style>
</head>
<body>

<div id="tableWrap" class="tableWrap">
    <table class="layui-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>
</div>

<div id="laypage"></div>

<script src="./layui/layui.js"></script>
<script src="./jquery-1.11.3.min.js"></script>
<script>
$(function(){
    var currPage = 1;
    var pageSize = 5;
    var tableData = [];

    // 获取数据
    function getData(){
        $.ajax({
            url: 'url/to/data',
            success: function (data) {
                // 将数据存入全局变量中
                tableData = data;
                // 渲染表格
                renderTable(tableData.slice(0, pageSize), 1, pageSize);
                // 分页
                setPagination();
            }
        });
    }

    // 渲染表格
    function renderTable(data, curr, limit){
        var html = '';
        $.each(data, function(index, item){
            // 构建表格行
            var tr = '';
            tr += '<tr>';
            tr += '<td>'+ item.id +'</td>';
            tr += '<td>'+ item.name +'</td>';
            tr += '<td>'+ item.age +'</td>';
            tr += '</tr>';
            html += tr;
        });
        $('#tableBody').html(html);
    }

    // 分页
    function setPagination(){
        var laypageHTML = $('#laypage');
        laypage({
            elem: laypageHTML[0],
            count: tableData.length,
            limit: pageSize,
            curr: currPage,
            theme: '#1E9FFF',
            jump: function (obj, first) {
                if (!first) {
                    currPage = obj.curr;
                    renderTable(tableData.slice((currPage-1)*pageSize, currPage*pageSize), currPage, pageSize);
                }
            }
        });
    }

    // 初始化
    function init(){
        getData();
    }

    init();
});
</script>
</body>
</html>

以上就是“layui+jquery支持IE8的表格分页方法”的完整攻略，希望可以对您有所帮助。

简介

准备工作

实现分页功能

示例

基础教程推荐