我正在使用 Datatables，在表的末尾有一行包含每一列的总数，我想在表的末尾修复这一行，以便在这一行使用排序选项时使用留在最后。您可以在图片上看到 Island Total 行是我想在表的第一个位置修复的这条线。对于表，我通过 AJAX 请求获取值，总计算是 javascript。我知道我可以使用 DataTables 中包含的 footerCallBack 选项，但我无法使用此方法编辑总行，因此我无法使用 footerCallBack。
表格的JS:
var data_use = [["Le Gold", 77.5, 10190, 789666], ["Bois Rouge", 68.9, 10031, 691571], ["Total île", 73.2, 20221, 1481237]];
$('#datatable').DataTable({
"sPaginationType" : "full_numbers",
"lengthMenu" : [[5, 10, 20, 30, -1], [5, 10, 20, 30, "All"]],
"iDisplayLength" : -1,
data : data_use,
columns : column_name,
dom : 'lfrtip',
responsive : true,
destroy : true,
searching: true,
});
最佳答案
对于您的情况，我能想到的最简单的解决方法是从表格数据中过滤出“总计”，并在每次重新绘制时将其附加到表格底部(修改 DOM)。
它并没有消除我上面的评论，而且似乎不是很好的解决方案，但是，它确实符合预期:
//src data
const data_use = [{basin:'Beaufond',yield:66,area:5183,production:342041},{basin:'Boid Rouge',yield:72.1,area:4848,production:349530},{basin:'Grand-Bois',yield:80.5,area:3519,production:238200},{basin:'Island Total',yield:73.3,area:20220,production:1481237},{basin:'Le Gol',yield:82.9,area:4282,production:354983},{basin:'Savanna',yield:63.4,area:2388,production:151483}];
//columns config
const column_name = [{title:'Basin',data:'basin'},{title:'Yield (T/ha)',data:'yield'},{title:'Surface area (ha)',data:'area'},{title:'Production (T)',data:'production'},{title:'',data:()=>'<button>Edit</button>'}];
//datatables initialization
$('#datatable').DataTable({
sPaginationType : "full_numbers",
lengthMenu : [[5, 10, 20, 30, -1], [5, 10, 20, 30, "All"]],
iDisplayLength : -1,
data : data_use.filter(({basin}) => basin != 'Island Total'),
columns : column_name,
dom : 'lfrtip',
responsive : true,
destroy : true,
searching: true,
drawCallback: () => {
const totals = data_use.find(({basin}) => basin == 'Island Total');
const bottomRowHtml = '<tr>'+Object.values(totals).reduce((r,e) => r+=`<td>${e}</td>`,'')+'<td><button>Edit</button></td></tr>';
$('#datatable tbody').append(bottomRowHtml);
}
});<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script></head><body><table id="datatable"></table></body></html>关于javascript - 如何使用数据表修复表末尾的一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57686637/