添加新列后如何使用JQuery DataTable进行列搜索
[英]How to do column search with JQuery DataTable after adding new column
问题描述
我有一个带有多个列的可查询的jQuery，这些列具有自己的列搜索文本框，我想通过单击按钮向表中添加一些新列和新数据集。
我执行以下步骤：1.销毁现有表2.追加新表头以形成新列3.重新构建数据表4.使用fnAdd（）追加数据
全局搜索看起来有效，但是在附加新数据后，列搜索外观无法正常工作。
<html>
<head>
<!--jQuery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script type="text/javascript" src="../res/lib/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!--jQuery Table-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script>
var header = [];
$(document).ready(function() {
salesInformationTable = $('#table').DataTable();
// Apply the search
salesInformationTable.columns().every( function () {
var that = this;
header.push(that);
} );
// Setup - add a text input to each footer cell
$('#table thead tr:eq(0) th').each( function () {
var title = $(this).text();
console.log('index:');
console.log($(this).index());
//var columnSeachNotAddIndex = [0,5,6];
if($(this).index()!=0){
console.log('add column search to column index:'+$(this).index());
$(this).html( '<input id="col_search_'+$(this).index()+'" type="text" placeholder="Search '+title+'" />' );
$('.col-search').hide();
}
} );
$('#purchaser_searchInput').keyup(function(){
console.log("keyup - purchaser_searchInput");
var content = $('#col_search_4').val();
$('#col_search_4').val($(this).val());
if($('#col_search_4').val()!=content){
var that = header[4];
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
}
});
});
function destroyClick(){
$('#table').DataTable().destroy();
}
function buildClick(){
$('#table').DataTable();
}
function addNewCol(){
$('#table thead .header_title').append('<th>New Column</th>');
$('#table thead .header_search').append("<th><div class='row'><input type='text' id='rebate_1_searchInput' class='searchbox'></div></th>");
$('#table thead .header_search_title').append('<th></th>');
$('#rebate_1_searchInput').keyup(function(){
console.log("keyup - purchaser_searchInput");
var content = $('#col_search_7').val();
console.log(content);
$('#col_search_7').val($(this).val());
if($('#col_search_7').val()!=content){
var that = header[7];
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
}
});
}
function addData(){
$('#table').dataTable().fnAddData([
"T1",
"T2",
"T3",
"T4",
"T5",
"T6",
"T7",
]);
}
function addData2(){
$('#table').dataTable().fnAddData([
"T1",
"T2",
"T3",
"T4",
"T5",
"T6",
"T8",
]);
}
function addDataNew(){
$('#table').dataTable().fnAddData([
"T1",
"T2",
"T3",
"T4",
"T5",
"T6",
"T7",
"T8"
]);
}
function addDataEmpty(){
$('#table').dataTable().fnAddData([
'',
"T2",
"T3",
"T4",
"T5",
"T6",
"T7",
"T8"
]);
}
function searchEmpty(){
console.log("search empty");
$('#table').DataTable().column(0).search('^\s*$', true, false).draw();
}
function searchEmpty2(){
console.log("search empty");
$('#table').DataTable().column(1).search('^\s*$', true, false).draw();
}
function removeFilter(){
$('#table').DataTable()
.search( '' )
.columns().search( '' )
.draw();
}
</script>
</head>
<body>
<table id="table" class="display" style="width:100%">
<thead>
<tr class="header_search_title col-search">
<th></th>
<th>Instance ID</th>
<th>PASP Date (YYYY/MM/DD)</th>
<th>Unit Property Address (YYYY/MM/DD)</th>
<th>Purchasers</th>
<th>Mortgage Application Date</th>
<th>Mortgate Status</th>
</tr>
<tr class="header_search">
<th>
<div class="row">
Search:
</div>
</th>
<th>
<div class="row">
<input type="text" id="test_input" class="searchbox">
</div>
</th>
<th>
<div class="row">
<input type="text" id="paspDate_searchInput" class="searchbox">
</div>
</th>
<th>
<div class="row">
<input type="text" id="unitPropertyAddress_searchInput" class="searchbox">
</div>
</th>
<th>
<div class="row">
<input type="text" id="purchaser_searchInput" class="searchbox">
</div>
</th>
<th>
<div class="row">
<input type="text" id="mortgageApplicationDate_searchInput" class="searchbox">
</div>
</th>
<th>
<div class="row">
<select class="form-control selectionbox2" id="salesInformation_status">
<option value="">All</option>
<option value="Applied">Applied</option>
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option vakue="Withdrawn">Withdrawn</option>
</select>
</div>
</th>
</tr>
<tr class="header_title">
<th>
<input type="checkbox" id="select-all" />
</th>
<th>
<div class="row">
<span>Instance ID</span>
</div>
</th>
<th>
<div class="row">
<span>PASP Date</span>
</div>
</th>
<th>
<div class="row">
<span>Unit Property Address</span>
</div>
</th>
<th>
<div class="row">
<span>Purchasers</span>
</div>
</th>
<th>
<div class="row">
<span>Mortgage Application Date</span>
</div>
</th>
<th>
<div class="row">
<span>Mortgage Status</span>
</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button onclick="destroyClick()">Destroy</button>
<button onclick="buildClick()">Build</button>
<button onclick="addNewCol()">New Column</button>
<button onclick="addData()">Data 1</button>
<button onclick="addData2()">Data 2</button>
<button onclick="addDataNew()">Data New</button>
<button onclick="addDataEmpty()">Data Empty</button>
<button onclick="searchEmpty()">Search Empty</button>
<button onclick="searchEmpty2()">Search Empty2</button>
<button onclick="removeFilter()">Remove Filter</button>
</body>
我将重点放在id：purchase_searchInput列搜索文本框中，当您在文本框中键入内容时，没有结果满足搜索要求，然后删除搜索文本，该表将不会返回到原始数据。 但是，如果使用全局搜索，则可以轻松搜索所有内容。
1 个解决方案
解决方案1
0 2019-08-30 08:12:54
解决方案：添加新列后清空标题数组，
header = [];
之后，运行以下命令：
salesInformationTable.columns().every( function () {
var that = this;
header.push(that);
} );
就这样。
jQuery dataTable - 如何搜索具有多个选项的完全匹配的列
[英]jQuery dataTable - how to search column with exact match for multiple options
如何在单个列搜索数据表中使用首字母进行搜索
[英]How to do search with first letter in individual column searching datatable
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.