layui实现一个table表格分页多选效果代码-html代码-BFW代码库

layui实现一个table表格分页多选效果代码

代码语言：html

所属分类：表格

代码描述：layui实现一个table表格分页多选效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
</head>
<body>

    <div id="test1"></div>

    <script>
    var ids=[];
        $.mockjax({
            url: '/getuser', //接口地址
            // 返回的HTTP状态码
            status: 200,
            // 响应时间
            responseTime: 750,
            // 响应的HTTP内容类型
            contentType: 'application/json',
            // 返回的内容
            responseText: {"code":0,"count":5,"msg":"",
                "data": [{
                    "id": 1,
                    "age": 11,
                    "city": "shaghia"
                },{
                    "id": 2,
                    "age": 11,
                    "city": "shaghia"
                },{
                    "id": 3,
                    "age": 11,
                    "city": "shaghia"
                },{
                    "id": 4,
                    "age": 11,
                    "city": "shaghia"
                },{
                    "id": 5,
                    "age": 11,
                    "city": "shaghia"
                }]
            }
        });

        layui.use('table', function () {
            let table = layui.table, form = layui.form, $ = layui.$;

            // 设置全局变量以保存选中行信息
            let ids = new Array();
            // 保存当前页全部数据id，点击全选时使用
            let tableIds = new Array();

            table.render({
                elem: '#test1', url: '/getuser', cols: [[{
                    type: 'checkbox', width: 70
                }, {
                    field: 'id', title: 'ID'
                }, {
                    field: 'age', title: '年龄',sort:true
                }, {
                    field: 'city', title: '城市',templet: function(d){
                    var str = '111';
                    if(d==1){str='普通用户';}
                    else if(d==2){str='管理员';}
                        return str;
                    }
                }]], request: {
                    pageName: 'pagenum' //页码的参数名称，默认：page
                    , limitName: 'pagesize' //每页数据量的参数名，默认：limit
                }, page: true,limit:5, done: function (res) {
           .........完整代码请登录后点击上方下载按钮下载查看