Search the table by the first input or the second input
Search the table by the first input or the second input
r_zhang
Posts: 5Questions: 2Answers: 0
Hi everyone,
I'm new into this.
I disabled the default search button and created two input fields and one search button myself. But it seems only the last input value get passed into the search function. But what I really want is that the DataTable search for the input value provided by the first box or the second box. For example, I can type in "Ashton Cox" into either the first box or the second box, it'll give the the row containing "Ashton Cox". But right now, only the input from the second box is working. The following is the code, can anyone help me please?
html:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<p>
<input type="text" id="mySearchText" placeholder="Search...">
<input type="text" id="second" placeholder="Search...">
<button id="mySearchButton">Search</button>
</p>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$4,525</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$4,080</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>2010/10/14</td>
<td>$6,730</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$5,000</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>System Architect</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$5,000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
js
```
$(document).ready( function () {
var table = $('#example').DataTable({
"dom": '<"top"i>rt<"bottom"><"clear">'
});
$('#mySearchButton').on( 'keyup click', function () {
table.search($('#mySearchText').val()).draw();
table.search($('#second').val()).draw() ;
} );
} );
````
Thank you very much!!!
R
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Create a search plugin for this. Here is an example using select inputs for two columns.
http://live.datatables.net/mucevape/1/edit
The example searches in specific columns. You can change it to search all the columns by using something like includes().
Kevin
Hi, sorry that I did not attach the test case link.
This is the link: http://live.datatables.net/neyenoja/1/edit
Thank you so much!
As I mentioned you will need to create a search plugin to perform the OR searches. What you have results in an AND search. Have you tried to implement what I suggested?
Kevin
Hi Kevin,
Thank you for your example and your reply. This is really helpful.
But is there a way for me to move the plug-in select box besides the "Search box" on the top of the table? And Can I change the text of "Search" to something else?
Thank you so much!!
The search inputs are independent of Datatables and can be text inputs if you prefer. You can place them anywhere you like on the page.
The
language.searchis used to change the text.Kevin
Thank you Kevin! I successfully add the placeholder to the search bar.
But I'm still struggling on moving the plug-in select box. I saw in your code that you append the select box into the column footer.
But I'm not sure how to select the default search box and move it besides to the default search box.
I took your example and wrote the plugin for you using text inputs.
http://live.datatables.net/neyenoja/2/edit
EDIT: I should add that it is a case insensitive search that checks each column to see if either search term is contained in the column (uses
indexOf()). If it finds a match for either term it breaks the loop and displays the row. Basically an OR search over the whole row.Kevin