How to do column search with JQuery DataTable after adding new column
Question
I have a jquery dattable with several columns, those columns have their own column search textbox, and I would like to add some new columns and new set of data to the table by clicking a button.
I do the following step: 1. Destroy the existing table 2. Append new table header to form new column 3. Re-build the dattable 4. Append data with fnAdd()
The golbal search looks working, but the column search looks cannot work properly after I append new data.
<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>
I focus in the id: purchaser_searchInput column search textbox, when you type something to the textbox, no result is fullfill the searching requirement, then you delete the search text, the table will not turn back to the original data. However, if you use the global search, you can easily search everything.
1 answers
solution1
0 2019-08-30 08:12:54
Solution: empty the header array after add the new column,
header = [];
after that run the following:
salesInformationTable.columns().every( function () {
var that = this;
header.push(that);
} );
That's all.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery Datatable column search
jQuery Datatable column not shown after adding a certain column
jQuery Datatable column search - how to exclude 0.00?
jQuery dataTable - how to search column with exact match for multiple options
How to do search with first letter in individual column searching datatable
jQuery DataTable custom button regex column search
Apply column search to current jQuery DataTable
Apply column search to current jQuery DataTable part 2
Jquery DataTable column search breaking with translations
JQuery Datatable set height on column after fnUpdate
Related Tags