tableXR.js自带分页和过滤搜索的表格插件,简单实用

tableXR.js自带分页和过滤搜索的表格插件,简单实用

tableXR.js自带分页和过滤搜索的表格插件,简单实用

使用过程

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["tableXR"], function() {
                $('#tablecont').tableXR({
                    //表格标题
                    title: '学生成绩列表',
                    //表格头部设置
                    columns: [{
                        data: 'name', title: '名字'
                    },
                        {
                            data: 'age', title: '年龄'
                        },
                        {
                            data: 'store', title: '得分'
                        },
                        {
                            data: 'level', title: '等级'
                        },
                    ],
                    //表格数据:
                    data: [{
                        name: '小红', age: '18', store: '98', level: 'A'
                    },
                        {
                            name: '小化', age: '18', store: '97', level: 'A'
                        },
                        {
                            name: '小杰', age: '15', store: '95', level: 'A'
                        },
                        {
                            name: '小刚', age: '17', store: '95', level: 'A'
                        },
                        {
                            name: '大水', age: '23', store: '97', level: 'A'
                        },
                        {
                            name: '小胡', age: '22', store: '88', level: 'B'
                        },
                        {
                            name: '热热', age: '19', store: '90', level: 'A'
                        },
                        {
                            name: '二娃', age: '17', store: '92', level: 'A'
                        },
                        {
                            name: '小瑟', age: '16', store: '89', level: 'B'
                        },
                        {
                            name: '滑板', age: '15', store: '91', level: 'A'
                        },
                        {
                            name: 'Ddd', age: '17', store: '95', level: 'A'
                        },
                        {
                            name: 'DSD', age: '17', store: '95', level: 'A'
                        },
                        {
                            name: 'DSD', age: '17', store: '95', level: 'A'
                        },
                        {
                            name: 'DSD', age: '17', store: '95', level: 'A'
                        },
                    ]
                })
            });
        });
    </script>
</head>
<body>
    <div id="tablecont" style="width: 100%;"></div>

</body>
</html>


立即下载tableXR.js查看所有js插件

网友评论0

程序员在线工具箱