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

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

 11152  29  查看评论 (10)
简易的动态生成表格和分页效果(原创) ie兼容8

使用说明

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

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

  1. 存放表格的DIV类名

  2. 行数

  3. 列数

  4. 表头名目

  5. 表格的具体内容

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

  1. 存放分页栏的DIV的ID

  2. 存放表格的类名

  3. 每页显示的条目数量

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


相关插件-图表,分页

冻结表头

冻结表头 实现表头的冻结效果
  图表
 13799  83

纯css3样式控制table表格隔行高亮显示

纯css3样式控制table表格隔行高亮显示,简单实用。
  图表
 1505  3

json转table插件

通过json对象动态生成Html Table表格。
  图表
 10877  22

jQuery表格奇偶行样式插件tableUi.js

表格样式包括默认样式、滑入滑出样式自定义,简单实用。
  图表
 4896  10

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币

    Jone 1
    2017/3/10 10:35:42

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

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

    // 内容置空
    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

    请问一下,

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

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

    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
        2016/10/11 15:10:00

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

        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
    没看出来怎么用。只能翻页 回复
取消回复