个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在使用basic column visibility和 individual column searching (text inputs) .
问题是，当用户将先前隐藏的列添加到表中时，该列的文本字段框不会出现。因此，用户无法过滤该列。
有谁知道如何为隐藏列启用过滤器？理想情况下，这不会导致清除其他过滤器中的文本的副产品(如果用户确实在其他过滤器中输入了文本)。
这是我的过滤代码:
<script type="text/javascript">
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#tableID tfoot th').each( function () {
var title = $(this).text();
if ((title != '') && !(title.includes("$"))) {
// Then the current column is *not* the Action column.
$(this).html( '<span style="color: #515151; font-size:15px;"><i>Filter</i></span> <br> <input type="text" style="margin-top:10px;" placeholder="'+title+'" /> ' );
}
} );
var table = $('#tableID').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
} );
} );
</script>
我使用此行来隐藏默认情况下我想从 View 中隐藏的列:
(table.column('.hideCol')).visible(false);
最佳答案
有一个自定义column-visibility数据表中的事件。所以，你可以修改你的<input>基于列当前状态的元素可见性。
例如你有<input>渲染函数，像这样:
//function to render input elements
const renderTfootInputs = () => {
//grab previous inputs into array
const prevInputs = [];
dataTable.columns().every(function(){
prevInputs.splice(this.index(), 1, $(`#example tfoot [colindex="${this.index()}"]`).val());
});
//purge <tfoot> row contents
$('#example tfoot tr').empty()
//iterate through table columns
dataTable.columns().every(function(){
//if the column is visible
this.visible() ?
//append corresponding footer <input>
$('#example tfoot tr').append(`<th><input colindex="${this.index()}" placeholder="${$(this.header()).text()}" value="${prevInputs[this.index()] || ''}"></input></th>`) :
true;
});
};
然后，您可以在列可见性更改时调用它:
$('#example').on('column-visibility.dt', renderTfootInputs);
此方法的完整演示可能如下所示:
//sample data source
const dataSrc = [
{id: 1, title: 'apple', cat: 'fruit'},
{id: 2, title: 'pear', cat: 'fruit'},
{id: 3, title: 'banana', cat: 'fruit'},
{id: 4, title: 'carrot', cat: 'vegie'},
{id: 5, title: 'eggplant', cat: 'vegie'}
];
//datatables initialization
const dataTable = $('#example').DataTable({
data: dataSrc,
dom: 'Bfrtip',
buttons: ['colvis'],
columns: ['id','title','cat'].map(header => ({title: header, data: header})),
columnDefs: [
{targets: 0, visible: false}
]
});
//append blank footer to the table
$('#example').append('<tfoot><tr></tr></tfoot>');
//function to render input elements
const renderTfootInputs = () => {
//grab previous inputs into array
const prevInputs = [];
dataTable.columns().every(function(){
prevInputs.splice(this.index(), 1, $(`#example tfoot [colindex="${this.index()}"]`).val());
});
//purge <tfoot> row contents
$('#example tfoot tr').empty()
//iterate through table columns
dataTable.columns().every(function(){
//if the column is visible
this.visible() ?
//append corresponding footer <input>
$('#example tfoot tr').append(`<th><input colindex="${this.index()}" placeholder="${$(this.header()).text()}" value="${prevInputs[this.index()] || ''}"></input></th>`) :
true;
});
};
//initial call of above function
renderTfootInputs();
//call that function each time upon column visibility changes
$('#example').on('column-visibility.dt', renderTfootInputs);
//individual search
$('#example').on('keyup', 'tfoot input', function(event){
dataTable.column($(event.target).attr('colindex')).search($(event.target).val()).draw();
});tfoot input {
display: block;
}
tfoot th {
padding-left: 10px !important;
}<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="application/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
</head>
<body>
<table id="example"></table>
</body>
</html>关于javascript - jQuery 数据表 : Combining column visibility with individual column filters (text inputs)?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56769371/
24
4
0
我目前正在创建一个正则表达式来拆分所有匹配以下格式的字符串:&[text(text - text text) !text]。这里的文本实际上可以是任何字符。并且间距很重要。文本将如图所示列出。 我已经
这个问题在这里已经有了答案: Remove duplicate commas and extra commas at start/end with RegExp in Javascript, and
我有以下代码。 from xml.dom.minidom import Document doc = Document() root = doc.createElement('root') doc.a
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Find text string in jQuery and make it bold 如何使用 jQuer
我使用 libmagic 在我的元素的 Web 界面中获取文件的 MIME 类型。我在 css 和 js 文件上得到文本/纯 mime 类型。 例如 chromium 显示以下警告: Resource
起初我必须阅读很多教程，但我仍然不知道我做错了什么...... 我想内联使用 4 个 div。在我想放置的那些 div 中:文本、图像、文本、文本。我希望中间文本自动设置为最大宽度。 我写了一个简单的
我想替换所有出现的 [b: "text"]至text使用 JavaScript 和 RegEx。目前我知道如何替换 [b: ""]至使用'/\[b: ""\]/g'但我不知道如果 " 之间有文本该怎么
这可能是一个幼稚的问题，但我想知道是否有比使用 text() 更好的方法将文本添加到绘图中。注意，我也在使用 layout()以及。具体来说，我有一个情节的一部分，我想在其中添加一些带有标题的文本，然
我必须反复从 latex 源粘贴代码，因此每次都必须做很多查找和替换操作('“a'=>'ä'，'” o'=>'ö'，...) 。 有没有一种方法可以存储这些搜索和替换规则，例如，我可以通过一次按键执行
当我在Sublime Text 3代码屏幕中编写代码时，它连续地向右滑动，如图所示。我该怎么办？ 请注意第10行。 最佳答案 如果您只想为当前 View (正在编辑的当前文件)激活自动换行，只需vie
是否有可能更改 sublime text 中的默认字体目录？我只想使用可移植 sublime 文本存储在我的 pendrive 上的字体，这样我就不必在我使用可移植 sublime 文本的每台机器上安
我是 Android 开发的新手，我有一个愚蠢的问题。如何将“文本字段”框放在一行中的文本旁边。 例子: Please Enter the number: [ ] 关于 "t
我想自动将“我的文本”更改为“我的文本”，因为这是用德语写的正确方式。引号可以在文本中的任何位置。 有没有一种简单的方法可以实现这一点？ 解决方案应该检查第一个字符，最后一个字符，比如“this”，或
我想知道是否有特殊的语法来绑定(bind)与现有文本连接的文本。 像这样。 显然，这行不通。 什么是最佳实践？ 使用 SL4。 最佳答案 使用StringFormat在 Binding 上。 WPF
我认为它应该打印“真实文本”，因为它相当于 true console.log('true text' || true ? 'text' : 'text1'); 但是，输出是“文本”；抱歉，如果是愚蠢的
有没有办法通过 css 打破文本，以便中间有一个“空白”？目前我正在通过手工打破文本来解决这个问题 -但这是愚蠢的。我知道有一个函数可以让文本在另一个 div 中结束和开始，但 IE 不支持它。 文本
我想为我的Tcl/Tk工具实现一个效果:在text控件中，根据具体情况，希望高亮一些线条的背景色，其他线条正常透明.有可能吗？ 我尝试了一些选项，例如:-highlightbackground 、-i
我正在尝试解析原始维基百科文章内容，例如the article on Sweden ，使用re.sub()。但是，我在尝试替换 {{some text}} block 时遇到了问题，因为它们可以包含更
我试图先删除 ComboBox 中的所有内容。然后在其前面添加文本，但保留了一些旧文本。有没有办法重置或清除 ComboBox？或者我怎样才能最好地实现这一目标？ public void GetBad
我知道我们应该创建 Example对象并将其传递给 nlp.update() 方法。根据 docs 中的示例, 我们有 for raw_text, entity_offsets in train_da
我是一名优秀的程序员,十分优秀！