【问题标题】:create empty rows in the data tables在数据表中创建空行
【发布时间】:2011-09-09 07:04:22
【问题描述】:

我想在最后一行数据中没有数据的数据表中创建一个表。我想把它留空,有边界。现在我当我每页有 10 行数据 4 时。数据进入 3 页,其中第一页和第二页有 4 行,当我们到达第三页时,只有两个数据,其他空间留空。我想创建一个表,然后获取数据,但数据表正在我的代码中创建表。 cud 有人建议我如何将最后两行留空且可见。

var dataSet = [];
for(var i = 0; i < data.response.docs.length; i++)
{

    var d = data.response.docs[i];


            var minPrice = d.min_price;
            var minPrice = d.shipping;
            var seller_rating = d.rating;
            var product_rating = d.product_rating;
            var total = minPrice + shipping;
            var ships_on = 'n/a';
            var delivered_by = 'n/a';

            dataSet.push([{ 'url': d.url},
                            total,
                           minPrice + '+' + shipping,
                          ships_on, delivered_by,
                          seller_rating, product_rating]);
        }
        $('#data_table').dataTable( {
            "aaData": dataSet,
            "aaSorting": [[0,'asc'],[0,'desc'],[2,'asc'],[2,'desc'],[3,'asc'],[3,'desc'],[4,'asc'],[4,'desc'],[5,'asc'],[5,'desc'],[6,'asc'],[6,'desc'],[7,'asc'],[7,'desc']],
            "iDisplayLength": 4,            
            "bInfo": true,
            "bLengthChange": false,
            "bJQueryUI": true,
            "bPaginate": true,
            "bAutoWidth": false,
            "sPaginationType": "full_numbers",
            "bAutoWidth": true,
            "aoColumns": [
                {   "sTitle": "Seller",
                    "sWidth": "155px",
                    "sClass": "grey" ,
                    "fnRender": function(obj) {
                        var data = obj.aData[ obj.iDataColumn ];
                        return "<A href='"+ data.url +"'>"+ data.title +"</A>";
                    }

                },//, "sWidth": "130px"
                {"sTitle": "Item Matched","sWidth": "100px","sClass":"center yellow","bSortable": false,
                    "fnRender": function (obj) {                            
                        //var img = obj.aData[obj.iDataColumn];                      
                        var data = obj.aData[obj.iDataColumn];
                        return "<img width='90px' height='50px' src='" + data.image + "'/><br>"+ data.name.slice(0,25);
                    }
                },
                { "sTitle": "Total Price(in $)","sClass": "center grey" },
                { "sTitle": "Price + Shipping(in $)","sClass": "center yellow" },
                { "sTitle": "Ships On", "sClass": "center grey" },
                { "sTitle": "Delivered By","sClass": "center yellow" },
                {
                    "sTitle": "Seller rating",
                    "sClass": "center grey",
                    "fnRender": function(obj) {
                        var sReturn = obj.aData[ obj.iDataColumn ];
                        var val = obj.aData[ obj.iDataColumn ];
                        if ( sReturn != "N/A") {

                            $('#fixed').raty({
                                    readOnly:  true,
                                    start:     val
                                });

                            sReturn = $('#fixed').html();
                            $('#fixed').html("");
                        }
                        return sReturn;
                    }
                },          
        }); 

我只想让最后两行在他们有数据或没有数据时可见


  if(dataSet != '' || no/4 != 0)
       {

       //alert(no);
        var minPrice = 0;
        var shipping = 0;
        var seller_rating = 0;
        var product_rating = 0;
        var ships_on = 'n/a';
        var delivered_by = 'n/a';   
        var total = minPrice + shipping;
        var a = no%4;
        for(var i=0;i<(4-a);i++)
        {

        dataSet.push([{'title': '', 'url': ''},
                            {'image': '', 'name': ''},
                            '0',
                           '0',
                          'n/a', 'n/a',
                         '0', '0']);
        }
        }
       $('#data_table').dataTable( {
            "aaData": dataSet ,
            "bSort":true,
            "aaSorting": [[0,'desc'],[0,'asc'],[2,'asc'],[2,'desc'],[3,'asc'],[3,'desc'],[4,'asc'],[4,'desc'],[5,'asc'],[5,'desc'],[6,'asc'],[6,'desc'],[7,'asc'],[7,'desc']],
            "iDisplayLength": 4,            
            "bInfo": true,
            "bLengthChange": false,
            "bJQueryUI": true,
            "bPaginate": true,
            "bAutoWidth": false,
            "sPaginationType": "full_numbers",
            "bAutoWidth": true,
            "aoColumns": [
                {   "sTitle": "Seller",
                    "sWidth": "155px",
                    "sClass": "grey" ,
                    "fnRender": function(obj) {
                        var data = obj.aData[ obj.iDataColumn ];
                        return "<a href='"+ data.url +"'>"+ data.title +"</a>";
                    }

                }

它创建了两行没有数据且为空的行。并将创建两个空行。我需要每页中每页有 4 个数据的数据。所以我以 4 的倍数使用它。

【问题讨论】:

    标签: javascript jquery html css datatables


    【解决方案1】:

    我不知道您一直在使用的数据表插件,但是您可以用空值填充数据集以使其工作:

    var dataset = ['1','2','3','4','5','6','7','8','9'];
    var rowCount = 4;
    var mod = dataset.length%rowCount;
    
    if(mod) {
        for(var i=mod; i<rowCount;i++) {
            dataset.push('')   
        }
    }
    

    http://jsfiddle.net/bsrykt/JJtNN/

    【讨论】:

      猜你喜欢
      • 2022-01-12
      • 2021-02-19
      • 1970-01-01
      • 1970-01-01
      • 2019-03-17
      • 2016-07-24
      • 1970-01-01
      • 2012-08-20
      • 2021-11-05
      相关资源
      最近更新 更多