UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

简易的动态生成表格和分页效果(原创)

所属分类：UI,导航-图表,分页

 50909  352  查看评论 (13)
分享到微信朋友圈
X
简易的动态生成表格和分页效果(原创) ie兼容8
 查看演示  立即下载

使用说明

使用时只需设置两个DIV，一个用来存放表格，一个用来放置分页栏

表格在使用时需指定5个参数，分别为：

  1. 存放表格的DIV类名

  2. 行数

  3. 列数

  4. 表头名目

  5. 表格的具体内容

分页特效在使用时需指定3个参数，分别为：

  1. 存放分页栏的DIV的ID

  2. 存放表格的类名

  3. 每页显示的条目数量

PS：两个插件都是推主本人写的，所以比较简单，也容易理解和修改，也很可能有BUG，欢迎指正^_^!


相关插件-图表,分页
查看更多

柱状图、折线图、饼状图 等图表插件

 柱状图、折线图、饼状图 等图表插件
  图表
 85787  506

百度ets动态添加数据

 通过点击不同按钮，进行ajax请求对ets进行数据填充.
  图表
 35011  361

AmChart使用例子

 AmChart统计图插件使用例子
  图表
 35095  397

ets实现汽车动态仪表盘

 通过ets实现汽车动态仪表盘，包括速度，转速等的实时数据更新
  图表
 18163  207

讨论这个项目（13）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    用户6457295973 0
    2018/6/12 9:24:02
    链接数据库像表格中插入数据，调ajax，怎么拼？ 回复
    无需言、做自己 评论奖励 1 jQ币
    2017/6/7 15:55:46

    // 获取实际输入的内容项

    1
    2
    3
    for (var real_row = 0; real_row < td.length; real_row += col - 1) {
        td_arr.push(td.slice(real_row, real_row + col));
    }

    table.js 实际输入这里 需要这样改  不然渲染的有问题

    回复
    简单就好 0
    2017/6/4 17:44:12

    一个页面里有多个分页时没法多个使用？

    回复
    Jone 评论奖励 1 jQ币
    2017/3/10 10:35:42

    一脸懵逼啊。LZ这坑有点大的。评论中修改的setContent方法，少数据运行一点问题都没有。但是数据量大的时候就会卡死。

    内容置空的处理中，多次循环了。后面内容的赋值，不需要在构造html的循环里面。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // 内容置空
    for (var y = 0; y < row; y++) {
        var tr = $("<tr>");
        $(tr).appendTo(table);
        for (var x = 0 + (col * y); x < col * (y + 1); x++) {
            $("<td>" + " " + "</td>").appendTo(tr);
        }
        $("</tr>").appendTo(table);
    }
    // 设置序号
    for (var i = 0; i < row; i++) {
        $("#re tr:eq(" + i + ") td:eq(0)").text(i + 1);
    }
    // 设置内容
    for (var r = 0; r < td_arr.length; r++) {
        for (var c = 1; c <= col; c++) {
            $("#re tr:eq(" + r + ") td:eq(" + c + ")").text(td_arr[r][c - 1]);
        }
    }
    回复
    郁金香小杰 0
    2016/12/9 15:12:14
    从后台调用数据的时候该怎么做 回复
    Kinger 0
    2016/11/29 16:11:13
    个人感觉调用ajax的时候....全部加载...再分页...会给服务器,以及页面的加载造成很大的压力.
        郁金香小杰0
        2016/12/9 15:12:29
        您好 这个怎么调用ajax
    回复
    糖醋排骨 0
    2016/10/10 19:10:30

    请问一下，

    1
    $(document).Table('.table_body','re',51,4,['序号','姓名','年龄','出生地'],[[,,],[,,],[,,]]);

    中，最后添加内容这里，怎么修改内容，你的js里面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    setContent = function() {
        var td = new Array();
        // $.each(content, function(i, item){
        //     $.each(item,function(j,val){
        //         td.push(val);                              
        //     });            
        // });
        for (var y = 0; y < row; y++) {
            var tr = $("<tr>");
            $(tr).appendTo(table);
            for (var x = 0 + (col * y); x < col * (y + 1); x++) {
                $("<td>" + " " + "</td>").appendTo(tr);
            }
            $("</tr>").appendTo(table);
            // 璁剧疆搴??
            for (var i = 0; i < row; i++) {
                $("#re tr:eq(" + i + ") td:eq(0)").text(i + 1);
            }
        }
     
    };

    怎么修改呢？

        暴躁评论奖励 1 jQ币
        2016/10/11 15:10:00

        感谢提问，刚刚发现这个版本的内容设置的地方有BUG，在js中改正如下

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        setContent = function() {
            var td = new Array();
            var td_arr = new Array();
            $.each(content,
            function(i, item) {
                $.each(item,
                function(j, val) {
                    td.push(val);
                    if (td[x] == null) td[x] = " ";
                });
            });
            // 获取实际输入的内容项
            for (var real_row = 0; real_row < td.length; real_row += col) {
                td_arr.push(td.slice(real_row, real_row + col));
            }
            // 内容置空
            for (var y = 0; y < row; y++) {
                var tr = $("<tr>");
                $(tr).appendTo(table);
                for (var x = 0 + (col * y); x < col * (y + 1); x++) {
                    $("<td>" + " " + "</td>").appendTo(tr);
                }
                $("</tr>").appendTo(table);
                // 设置序号
                for (var i = 0; i < row; i++) {
                    $("#re tr:eq(" + i + ") td:eq(0)").text(i + 1);
                }
                // 设置内容
                for (var r = 0; r < td_arr.length; r++) {
                    for (var c = 1; c <= col; c++) {
                        $("#re tr:eq(" + r + ") td:eq(" + c + ")").text(td_arr[r][c - 1]);
                    }
                }
            }
        };
        IT小蜗牛0
        2016/10/20 10:10:28
        你好，我把内容写上去，但实际显示的时候会出现错位， 如我内容这么设置$(document).Table('.table_body','re',6,4,['序号','项目1','项目2','项目3'],[[11,12,13],[21,22,23],[31,32,33],[41,42,43],[51,52,53],[61,62,63]]);显示的时候是这样的请问这是哪里出了问题？
        IT小蜗牛0
        2016/10/20 10:10:43
        无法粘贴图片。。。上面显示出来是这样的：序号项目1项目2项目31111213222233133341424515253562636
        IT小蜗牛0
        2016/10/20 10:10:42
        序号  项目1  项目2  项目3 1          11      12        132          22      23       313          33      41       424          51      52       535          62      636
    回复
    Low energy children are forbidden to enter. 0
    2016/10/6 14:10:52
    没看出来怎么用。只能翻页 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复