[英]How do I sort(default sort), show 50 entries and filter each column datatable?
<script>
$(document).ready(function() {
$('#sortable').DataTable( {
initComplete: function () {
this.api().columns([0,1,2,3]).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
// var select = $('<select><option value="">' + $(this.header()).html() + '</option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
//select.append( '<option value="'+d+'">'+d+'</option>' )
select.append( '<option>'+d+'</option>' )
} );
} );
}
} );
} );
$(document).ready(function() {
$('#sortable').DataTable({
"order": [[1, "asc"],[0, "asc"]],
"columns": [
null,
null,
null,
{"orderable": false},
{"orderable": false},
{"orderable": false},
],
"searching": true,
"paging": false,
"ordering": true,
"info": false
});
} );
</script>
如果注释了另一个,则这2个单独的块可以很好地单独工作,但是我不知道如何将它们组合为一个块,因此可以实现默认的排序和下拉过滤器。
目的是在列[0,1,2,3]上设置下拉过滤器,进行默认排序,并显示默认行数= 50。
//like so:
<script>
$(document).ready(function() {
$('#sortable').DataTable( {
sort by default;
set default rows shown to 50;
put filter on first 4 colmuns;
})
})
</script>
在此先感谢您的帮助。
您的“两个块”是从同一张表进行的DataTables对象的两次初始化,这就是为什么它们不能一起使用的原因。 好消息是,您可以将两者合并为一个模块,并且它们应该一起工作,因为您使用的所有选项都不会相互冲突(据我所知)。 它看起来应该像这样:
<script>
$(document).ready(function() {
$('#sortable').DataTable( {
pageLength: 50, //This is the option which will give you 50 rows by default
order: [[1, "asc"],[0, "asc"]],
columns: [
null,
null,
null,
{"orderable": false},
{"orderable": false},
{"orderable": false},
],
searching: true,
paging: false,
ordering: true,
info: false,
initComplete: function () {
this.api().columns([0,1,2,3]).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
// var select = $('<select><option value="">' + $(this.header()).html() + '</option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
//select.append( '<option value="'+d+'">'+d+'</option>' )
select.append( '<option>'+d+'</option>' )
} );
} );
}
} );
} );
</script>
您会注意到,我所做的只是将第二个块中选择的选项放到第一个块中,并添加pageLength
选项以使行数从50开始。如果需要,您可以选择在选项名称前加上""
,但这不是必需的,而只是一个偏好(例如"order"
vs order
)。
每页代码中只能有一个DataTables初始化.DataTable()
调用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.