数据表行数不适用于搜索结果
Datatable row count not working with search result
在视图中,代码工作正常并向我显示了计数和结果。也在搜索中。但是,当我搜索任何单词时,我希望根据搜索结果进行计数,但在我的情况下,它会显示所有价格字段的总数。它没有显示当前的搜索结果数。谁能帮帮我?
用于自定义搜索和最后两个字段计数的我的数据表代码:
$(document).ready(function() {
var table = $('#example').DataTable({
"scrollX": true,
"bLengthChange": false,
dom: 'Bfrtip',
buttons: [{
extend: "excel",
className: "darse"
},{
extend: "print",
className: "ddf"
}]
});
确保在 selector-modifier
of the column
方法中设置 search: 'applied'
。
$('<p>' + table.column(6, {
page: 'current',
search: 'applied'
}).data().sum() + '</p>').prependTo('#demo');
您也只在初始抽奖后调用了一次总和。将对 sum 的调用移至 drawCallback
。
下面是一个例子:
$.fn.DataTable.Api.register('column().data().sum()', function() {
return this.reduce(function(a, b) {
var x = parseFloat(a) || 0;
var y = parseFloat(b) || 0;
return x + y;
}, 0);
});
$(document).ready(function() {
var table = $('#example').DataTable({
"bLengthChange": false,
dom: 'Bfrtip',
drawCallback: function(settings) {
var api = this.api();
$('<p>' + api.column(1, {
page: 'current',
search: 'applied'
}).data().sum() + '</p>').prependTo('#demo');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<span id="demo" />
<table id="example">
<thead>
<tr>
<th>Text</th>
<th>Number</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Text</th>
<th>Number</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Alpha</td>
<td>3</td>
</tr>
<tr>
<td>Beta</td>
<td>4</td>
</tr>
<tr>
<td>Gamma</td>
<td>8</td>
</tr>
<tr>
<td>Delta</td>
<td>5</td>
</tr>
</tbody>
</table>
在视图中,代码工作正常并向我显示了计数和结果。也在搜索中。但是,当我搜索任何单词时,我希望根据搜索结果进行计数,但在我的情况下,它会显示所有价格字段的总数。它没有显示当前的搜索结果数。谁能帮帮我?
用于自定义搜索和最后两个字段计数的我的数据表代码:
$(document).ready(function() {
var table = $('#example').DataTable({
"scrollX": true,
"bLengthChange": false,
dom: 'Bfrtip',
buttons: [{
extend: "excel",
className: "darse"
},{
extend: "print",
className: "ddf"
}]
});
确保在 selector-modifier
of the column
方法中设置 search: 'applied'
。
$('<p>' + table.column(6, {
page: 'current',
search: 'applied'
}).data().sum() + '</p>').prependTo('#demo');
您也只在初始抽奖后调用了一次总和。将对 sum 的调用移至 drawCallback
。
下面是一个例子:
$.fn.DataTable.Api.register('column().data().sum()', function() {
return this.reduce(function(a, b) {
var x = parseFloat(a) || 0;
var y = parseFloat(b) || 0;
return x + y;
}, 0);
});
$(document).ready(function() {
var table = $('#example').DataTable({
"bLengthChange": false,
dom: 'Bfrtip',
drawCallback: function(settings) {
var api = this.api();
$('<p>' + api.column(1, {
page: 'current',
search: 'applied'
}).data().sum() + '</p>').prependTo('#demo');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<span id="demo" />
<table id="example">
<thead>
<tr>
<th>Text</th>
<th>Number</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Text</th>
<th>Number</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Alpha</td>
<td>3</td>
</tr>
<tr>
<td>Beta</td>
<td>4</td>
</tr>
<tr>
<td>Gamma</td>
<td>8</td>
</tr>
<tr>
<td>Delta</td>
<td>5</td>
</tr>
</tbody>
</table>