How to show footer?

lurker93 · June 2019

var table = $('#biAmzTrafficAnalysisTable').DataTable({
        "language": {
            "info": "第_PAGE_页(共_PAGES_页）",
            "search": "表内模糊查找",
            "paginate": {
                "previous": "第一页",
                "next": "下一页"
            }
        },
        "pageLength": 50,
        'paging'      : true,
        'footer'      : true,
        'lengthChange': false,
        'searching'   : true,
        'ordering'    : true,
        'info'        : false,
        // fixedHeader: {
        //  header: true,
        //  headerOffset: $('#fixed').height()
        // },
        "scrollY": '70vh',
        scrollCollapse: true,
        "autoWidth": false,
        'data':dataArr,
        // 默认排序
        "order": [[ 5, "desc" ]],
        // 表头
        'columns': [
            { "data": "picture","width": "","title": '图 片',"footer":"test"},
            { "data": "sku","title": 'SKU' },
            { "data": "" ,"title": 'ASIN'},
            { "data": "sessions" ,"title": '买家访<br>问次数'},
            { "data": "pageViews" ,"title": '页面浏览<br>次数'},
            { "data": "unitsOrdered" ,"title": '订购商品<br>数量'},
            { "data": "orderedProductSales" ,"title": '订购商品<br>销售额'},
            { "data": "sessionPercentage" ,"title": '买家访问<br>转换率'},
            { "data": "pageViewsPercentage" ,"title": '页面浏览<br>转换率'},
            { "data": "buyBoxPercentage" ,"title": '购买按钮<br>赢得率'},
            { "data": "unitSessionPercentage" ,"title": '商品数量<br>转化率'},
            { "data": "publishTime" ,"title": '上架时间',"width": "117px"}
        ],
        // // 特殊列
        "columnDefs" : [
            {       //禁止参与搜索
                "targets": [0,3,4,5,6,7,8,9,10,11],// 列索引负数右起正数左起
                "searchable": false
            },
            {   //禁止第一列第六列不能排序
                "targets": [0,1,2],
                "orderable": false
            },
            {
                "targets" : 0,//操作按钮目标列
                "data" : null,
                "searchable": false,
                "render" : function(data, type,row) {
                    return  '<a class="example-image-link" href="'+row.picture+'" data-lightbox="product'+row+'"><img class="lazy" height="100" src="${ctxStatic}/img/louding2.jpg" data-original="'+row.picture+'"/></a>';
                    // return  '<a class="example-image-link" href="'+row.picture+'" data-lightbox="product'+row+'"><img class="lazy" height="100" src="'+row.picture+'"/></a>';
                }
            },
            {
                "targets": 1,
                "data" : null,
                "searchable": false,
                "render": function (data, type,row ) {
                    return "<a onclick='showDetails(\""+asin+"\",\""+storeCode+"\")'>"+row.sku+"</a>";
                }
            },
            {
                "targets": 2,
                "data" : null,
                "searchable": false,
                "render": function (data, type,row ) {
                    return "父："+row.parentAsin+"<br>子："+row.asin;
                }
            },
            {
                "targets": 7,
                "data" : null,
                "searchable": false,
                "render": function (data, type,row ) {
                    return (row.sessionPercentage*100).toFixed(2)+"%";
                }
            },
            {
                "targets": 8,
                "data" : null,
                "searchable": false,
                "render": function (data, type,row ) {
                    return (row.pageViewsPercentage*100).toFixed(2)+"%";
                }
            },
            {
                "targets": 9,
                "data" : null,
                "searchable": false,
                "render": function (data, type,row ) {
                    return (row.buyBoxPercentage*100).toFixed(2)+"%";
                }
            },
            {
                "targets": 10,
                "data" : null,
                "searchable": false,
                "render": function (data, type,row ) {
                    return (row.unitSessionPercentage*100).toFixed(2)+"%";
                }
            },
            {
                "targets": 11,
                "data" : null,
                "searchable": false,
                "render": function (data, type,row ) {
                    if (row.publishTime) {
                        return row.publishTime
                    }
                    return "-";
                }
            }
        ],
        
        "initComplete": function( settings, json ) {
            imageLazyLoad();
        }
    });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

lurker93 · June 2019

lurker93 · June 2019

lurker93 · June 2019

colin · June 2019

Hi @lurker93 ,

Did you have a tfoot element in your HTML? If you have, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

lurker93 · June 2019

Hi @colin, thanks for your reply,i see the forum rules . i tried to give you a test link , but i failed. can i provide some code instead of test link? I would appreciate it if you would agree with me

Looking forward to your reply

/---- import -----/

/---- html -----/

/---- JS -----/

var dataArr =[{"asin":"B01GONCDP6","buyBoxPercentage":0.4805,"orderedProductSales":18109.01,"pageViews":11776,"pageViewsPercentage":0.0107,"parentAsin":"B01GONCD3I","pdName":"","picture":"http://img69.irobotbox.com/AE-A/Upload/Product/1555/362/1007362/AE-A07f00776-b225-4022-80b6-bda63da7918d.jpg","publishTime":"2018-02-01","sessionPercentage":0.0102,"sessions":8448,"sku":"BT070-102","unitSessionPercentage":0.0906,"unitsOrdered":908},
{"asin":"B01GONCDP6","buyBoxPercentage":0.4805,"orderedProductSales":18109.01,"pageViews":11776,"pageViewsPercentage":0.0107,"parentAsin":"B01GONCD3I","pdName":"","picture":"http://img69.irobotbox.com/AE-A/Upload/Product/1555/362/1007362/AE-A07f00776-b225-4022-80b6-bda63da7918d.jpg","publishTime":"2018-02-01","sessionPercentage":0.0102,"sessions":8448,"sku":"BT070-102","unitSessionPercentage":0.0906,"unitsOrdered":908},
{"asin":"B01GONCDP6","buyBoxPercentage":0.4805,"orderedProductSales":18109.01,"pageViews":11776,"pageViewsPercentage":0.0107,"parentAsin":"B01GONCD3I","pdName":"","picture":"http://img69.irobotbox.com/AE-A/Upload/Product/1555/362/1007362/AE-A07f00776-b225-4022-80b6-bda63da7918d.jpg","publishTime":"2018-02-01","sessionPercentage":0.0102,"sessions":8448,"sku":"BT070-102","unitSessionPercentage":0.0906,"unitsOrdered":908},
{"asin":"B01GONCDP6","buyBoxPercentage":0.4805,"orderedProductSales":18109.01,"pageViews":11776,"pageViewsPercentage":0.0107,"parentAsin":"B01GONCD3I","pdName":"","picture":"http://img69.irobotbox.com/AE-A/Upload/Product/1555/362/1007362/AE-A07f00776-b225-4022-80b6-bda63da7918d.jpg","publishTime":"2018-02-01","sessionPercentage":0.0102,"sessions":8448,"sku":"BT070-102","unitSessionPercentage":0.0906,"unitsOrdered":908},
{"asin":"B01GONCDP6","buyBoxPercentage":0.4805,"orderedProductSales":18109.01,"pageViews":11776,"pageViewsPercentage":0.0107,"parentAsin":"B01GONCD3I","pdName":"","picture":"http://img69.irobotbox.com/AE-A/Upload/Product/1555/362/1007362/AE-A07f00776-b225-4022-80b6-bda63da7918d.jpg","publishTime":"2018-02-01","sessionPercentage":0.0102,"sessions":8448,"sku":"BT070-102","unitSessionPercentage":0.0906,"unitsOrdered":908},
{"asin":"B01GONCDP6","buyBoxPercentage":0.4805,"orderedProductSales":18109.01,"pageViews":11776,"pageViewsPercentage":0.0107,"parentAsin":"B01GONCD3I","pdName":"","picture":"http://img69.irobotbox.com/AE-A/Upload/Product/1555/362/1007362/AE-A07f00776-b225-4022-80b6-bda63da7918d.jpg","publishTime":"2018-02-01","sessionPercentage":0.0102,"sessions":8448,"sku":"BT070-102","unitSessionPercentage":0.0906,"unitsOrdered":908},
{"asin":"B01GONCDP6","buyBoxPercentage":0.4805,"orderedProductSales":18109.01,"pageViews":11776,"pageViewsPercentage":0.0107,"parentAsin":"B01GONCD3I","pdName":"","picture":"http://img69.irobotbox.com/AE-A/Upload/Product/1555/362/1007362/AE-A07f00776-b225-4022-80b6-bda63da7918d.jpg","publishTime":"2018-02-01","sessionPercentage":0.0102,"sessions":8448,"sku":"BT070-102","unitSessionPercentage":0.0906,"unitsOrdered":908}];
$(document).ready( function () {
var table = $('#example').DataTable({
"language": {
"info": "第PAGE页(共PAGES页）",
"search": "表内模糊查找",
"paginate": {
"previous": "第一页",
"next": "下一页"
}
},
"pageLength": 50,
'paging' : true,
'footer' : true,
'lengthChange': false,
'searching' : true,
'ordering' : true,
'info' : false,
// fixedHeader: {
// header: true,
// headerOffset: $('#fixed').height()
// },
"scrollY": '70vh',
scrollCollapse: true,
"autoWidth": false,
'data':dataArr,
// 默认排序
"order": [[ 5, "desc" ]],
// 表头
'columns': [
{ "data": "picture","width": "","title": '图片',"footer":"test"},
{ "data": "sku","title": 'SKU' },
{ "data": "" ,"title": 'ASIN'},
{ "data": "sessions" ,"title": '买家访 问次数'},
{ "data": "pageViews" ,"title": '页面浏览 次数'},
{ "data": "unitsOrdered" ,"title": '订购商品 数量'},
{ "data": "orderedProductSales" ,"title": '订购商品 销售额'},
{ "data": "sessionPercentage" ,"title": '买家访问 转换率'},
{ "data": "pageViewsPercentage" ,"title": '页面浏览 转换率'},
{ "data": "buyBoxPercentage" ,"title": '购买按钮 赢得率'},
{ "data": "unitSessionPercentage" ,"title": '商品数量 转化率'},
{ "data": "publishTime" ,"title": '上架时间',"width": "117px"}
],
// // 特殊列
"columnDefs" : [
{ //禁止参与搜索
"targets": [0,3,4,5,6,7,8,9,10,11],// 列索引负数右起正数左起
"searchable": false
},
{ //禁止第一列第六列不能排序
"targets": [0,1,2],
"orderable": false
},
{
"targets" : 0,//操作按钮目标列
"data" : null,
"searchable": false,
"render" : function(data, type,row) {
return '<a class="example-image-link" href="'+row.picture+'" data-lightbox="product'+row+'"><img class="lazy" height="100" src="${ctxStatic}/img/louding2.jpg" data-original="'+row.picture+'"/></a>';
// return '<a class="example-image-link" href="'+row.picture+'" data-lightbox="product'+row+'"><img class="lazy" height="100" src="'+row.picture+'"/></a>';
}
},
{
"targets": 1,
"data" : null,
"searchable": false,
"render": function (data, type,row ) {
return "<a onclick='showDetails(\""+asin+"\",\""+storeCode+"\")'>"+row.sku+"</a>";
}
},
{
"targets": 2,
"data" : null,
"searchable": false,
"render": function (data, type,row ) {
return "父："+row.parentAsin+" 子："+row.asin;
}
},
{
"targets": 7,
"data" : null,
"searchable": false,
"render": function (data, type,row ) {
return (row.sessionPercentage100).toFixed(2)+"%";
}
},
{
"targets": 8,
"data" : null,
"searchable": false,
"render": function (data, type,row ) {
return (row.pageViewsPercentage100).toFixed(2)+"%";
}
},
{
"targets": 9,
"data" : null,
"searchable": false,
"render": function (data, type,row ) {
return (row.buyBoxPercentage100).toFixed(2)+"%";
}
},
{
"targets": 10,
"data" : null,
"searchable": false,
"render": function (data, type,row ) {
return (row.unitSessionPercentage100).toFixed(2)+"%";
}
},
{
"targets": 11,
"data" : null,
"searchable": false,
"render": function (data, type,row ) {
if (row.publishTime) {
return row.publishTime;
}
return "-";
}
}
]
});
} );

kthorngren · June 2019

Datatables doesn't build the footer only the header when using columns.title. Please see this thread for the same question.

Kevin

How to show footer?

How to show footer?

Answers

Howdy, Stranger!

Categories

DataTables

How to show footer?

How to show footer?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables