javascript - 在制表器中显示行数
问题描述
在 DataTables 中,我们具有显示 100 行的第 1 行的功能。我想在制表器中做相同或类似的事情。我使用了这种方法,它返回空表:
JavaScript
var tabulator_table = new Tabulator("#example", {
columns: [
{ title: "", field: "", headerFilter: "input" },
{ title: "", field: "", headerFilter: "input" },
{ title: "", field: "", headerFilter: "input" },
{ title: "", field: "", headerFilter: "input" },
{ title: "", field: "", headerFilter: "input" },
{ title: "", field: "", headerFilter: "input" },
],
//this part should return row count
dataFiltered: function (data, field, type, value) {
//data - the subset of the total table data that has passed the filter and is now visible
//field - the field being filtered
//type - the type of filter being used
//value - the value of the filter
//set text in info element to show the number of rows and filters currently applied
$("#example-table-info").text("rows:" + data.length + " of " + $("#tableID").Tabulator("getData").length +
", filter:" + field + type + value);
}
});
HTML
<div class="footer">
<p id="example-table-info"></p>
<div id="myButtons"> Export </div>
</div>
错误是:"tabulator is not a function"
我还尝试使用另一种方法: JavaScript
function myFunction() {
return $('tr', $(this).find('tbody')).length;
}
rowctr = $('#tableID').rowCount();
document.getElementById("demo").innerHTML = myFunction();
HTML
<p id="demo"></p>
我也在他们的github上看到使用这个:
var activeRowCount = table.getDataCount(true);
但我不知道如何或在哪里应用它并在我的页脚标签中返回值。谢谢你。
解决方案
经过研究和帮助,这是我所做的:
JavaScript
var tabulator_table = new Tabulator("#example", {
columns: [
{ title: "", field: "", bottomCalc: "count", headerFilter: "input" },
{ title: "", field: "", bottomCalc: "count", headerFilter: "input" },
{ title: "", field: "", bottomCalc: "count", headerFilter: "input" },
{ title: "", field: "", bottomCalc: "count",headerFilter: "input" },
{ title: "", field: "", bottomCalc: "count", headerFilter: "input" },
{ title: "", field: "", bottomCalc: "count", headerFilter: "input" },
],
dataFiltered: function(filters, rows) {
var el = document.getElementById("search_count");
el.innerHTML = rows.length;
},
dataLoaded: function(data) {
var el = document.getElementById("total_count");
el.innerHTML = data.length;
},
});
var total_count = $(".tabulator-footer").find('.tabulator-cell:first-child()').text();
$("#total_count").text(total_count);
//rest of your js if you have any.
CSS
.tabulator-footer {
display: none;
}
HTML
<span style="color:#102D4F;font-size:12px;font-family:Arial, Helvetica, sans-serif">
Showing <span id="search_count"></span> results in total <span id="total_count"></span>
</span>
推荐阅读
- python - 为什么这行代码有一个反斜杠作为输出?
- sql - 尝试设置子查询以将平均价格与给定类别的所有价格进行比较
- asp.net - 为什么使用实体框架创建视图不起作用 - 数据库代码优先?
- simulation - Anylogic,根据时间条件激活或停用延迟块
- html - 如何在不破坏子列表的情况下在两列中显示多级列表?
- jmeter - jmeter 使用 jp@gc 运行比预期更多的线程 - Ultimate Thread Group
- java - 试图在数组列表的外部数组列表中获取类对象的内部数组列表的大小
- mule - Mule 4 对象存储在检索时始终返回 null
- python - 始终允许下载 m3u8 文件 selenium python
- c# - Json 反序列化错误,问题 C# .Net Core