如何解决如何在javascript和jquery中隐藏数据表显示条目?
我正在使用jQuery的DataTable插件,并使用show entry(datatables_length)具有一个下拉列表,以选择一次在页面上显示多少个条目。我还有一个由DataTable给出的内置小型搜索功能,以搜索所需的条目。我正在努力隐藏页面上的显示条目下拉列表,仅当DataTable搜索未在搜索栏中找到任何匹配的数据时。下面是我的代码。如果搜索功能返回空值或不匹配的值,请帮我隐藏显示条目下拉列表。
$(document).ready(function() {
$('#table').DataTable() {
'oLanguage': {
'sSearch': '<span>Search</span>'
},lengthMenu : [ 5,10,15,20],pagingType: 'full_numbers'
});
searchForData();
});
function searchForData() {
$('.datatable_filter input[type="search"])
.attr('placeholder','person Id','Person name')
.css({'width':'500px','display':'inline-block'});
}
});
解决方法
此处可以使用drawCallback
option
$(document).ready( function () {
var table = $('#table').DataTable({
drawCallback: function(){
var api = this.api();
var records = api.page.info().recordsDisplay;
var pageMenu = $('div.dataTables_length');
if (records === 0) {
pageMenu.hide();
} else if (pageMenu.css('display') == 'none') {
pageMenu.show();
}
// HERE IS YOUR FUNCTION TO CUSTOM YOUR SEARCH INPUT
searchForData();
}
});
});
一个实时示例:http://live.datatables.net/pecafifi/2/edit
如果您使用的是DataTables 版本,则必须使用fnDrawCallback
option
我这样写:
$(document).ready(function() {
$('#table').DataTable({
'oLanguage': {
'sSearch': '<span>Search</span>'
},lengthMenu : [ 5,10,15,20],pagingType: 'full_numbers',drawCallback: function(){
var api = this.api();
var records = api.page.info().recordsDisplay;
var pageMenu = $('div.dataTables_length');
if (records === 0) {
pageMenu.hide();
}
}
});
searchForData();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。