Introduction and feature preview
This is part 107 of jQuery tutorial. In this video we'll discuss how to implement search functionality on every jQuery data table column. Let me explain what I mean. Notice at the example right here we've got a search text box across every column and notice what the search text box says. So for first name it says search first name and for last name it says search last name, so on and so forth. Now if we enter Rob for example in the search first name text box then it should search only within the first name column and the matching rows should be displayed. So let's see how to achieve this. Let's flip to Visual Studio. This is the same example that we worked with in the previous video session.
Preparing the example and storing the DataTable instance
So if we view this page in the browser at the moment this is how the table is rendered. We only have the search functionality here but we don't have a search text box across every column. So let's see how to achieve this. We will be modifying the same example so I would strongly encourage you to watch part 106 before proceeding with this video. The first thing that I'm going to do here is create a variable and store the reference of the data table in it and I'm going to call this variable data table instance. So we are storing the data table in this variable. We will be reusing this variable in a bit and notice here we have the success callback function opening brace and the closing brace is right here. So just before the closing brace I'm going to use a selector and find all the th elements that we have in the tfoot section of this table. So this table has got an ID, it is data table, so let's use the jQuery ID selector to find the table using its ID. Within that we have got tfoot section and within the tfoot section we have got th elements. So we want all those th elements and I'm going to use the jQuery each function and loop through each of those th elements.
Getting header text and creating input placeholders
Now the first thing that I want is the title, the header text. So if you look at the th elements we have the same set of th elements in the thead section as well as in the tfoot section; they're present in the same order as well. Okay, so what I'm going to do now is retrieve the header text from the th elements that are present in the thead section of this table. Okay and the reason why we need that text is because if you look at the text boxes here notice what they say: the first name search text box says search first name. Similarly last name search text box says search last name. So somehow we have to get that header text. So to get that we're going to loop through each of the th elements and let's create a variable here title equals and I'm going to use the same selector but I'm going to modify that so instead of using tfoot here I'm going to use thead and let's use the jQuery eq function. To this eq function we can pass the index of the th element within the array that this selector returns. And since the th elements that are present in the tfoot section are in the same order the index of this th element matches the index of the th element in both cases. It is zero for first name, it is one for last name, it is two and so on. So what I'm going to do here is use dollar this keyword. So this keyword references the th element that we are currently iterating over and on that I'm going to use the jQuery index function to retrieve its index and we are passing the index to the eq function and that is going to return us the th element that's present in the thead section. Notice the th element has got the text ID, first name, last name, etc., depending on the element that we are currently iterating over. So I'm going to use the text function here and that's going to return us the text of the th element. Okay. And the next thing that we want to do is create a new text box and we want that text there within that text box. To do that I'm going to use this keyword here dollar this. So here this keyword again references the th element within the footer section that we are currently iterating over and on that I'm going to use the html function and we want to add a new input element of type equals text and I'm going to use the placeholder attribute here placeholder equals search so it should say search first name, search last name etc., search and to that I'm going to append whatever value we have got in the title variable and then we need to close the double quote and the input element itself.
With this change let's reload our page and see what we get. Now look at this I have to scroll all the way down to see those search text boxes. Look at that the search text box across ID says search ID, search first name, etc. Okay now I don't want to scroll to see them so I'm going to remove the scrollY property that we included in the previous video session. So let's get rid of this property and let's go ahead and reload this page. So now look at this I don't have to scroll down to see the search text boxes. Okay. All right now the border is not properly set that's because we have set a fixed width, I mean fixed width to the div surrounding that data table, so I'm going to actually change that to a different width. So let's change it to maybe 700 pixels, 1,700 pixels and now it should properly surround the data table. All right. So now we have the search text boxes. Okay and at the moment you know this website right column is not searchable that's because in the previous video session we have set searchable option to false. Let's include that in search by changing that value to true. Okay. All right.
Wiring keyup and change events to column search
So now what we want to do whenever we type for example Rob here then we want to search for Rob in the first name column and display only the matching rows. So we want to handle two events here: the keyup event — as soon as I key up on letter R we want that search to kick in — so we want to handle keyup and we also want to handle change event on this text box. So for that what I'm going to do is notice here we're using this variable data table instance, so that's holding a reference to our data table. So right here I'm going to use that and I'm going to use columns function. Okay now another important, important thing to keep in mind here is that if you look at the constructor function that we are using — look at this when I press control space — look at that there are two versions of dataTable: one with a small letter d and another one with capital letter D. So what is the difference? The constructor function with capital letter D that's the new version, okay, and the one with small letter d is the old version. So if you're using the old version and if you want to use the new API that comes with DataTables then you will have to use API function on this variable. If this is not clear the moment don't worry that will be clear in just a bit. For now let's go ahead and use this new constructor function DataTable with a capital letter D. All right. So now notice here we're using columns and I'm going to use every function to loop through every column in the data table. Okay and I'm going to create a variable here and I'm going to call this data table column equals this. So we are looping through every data table column so this keyword here references the data column that we are currently iterating over. And now dollar this.footer — so I'm using a function here dollar this.footer — so it's going to find the footer and within the footer what do we have? So if you look at this page right here within every footer of this data column we have a text box and this text box you know it's an input element right. So within the footer I want to find input element and I want to use the jQuery on function and associate two event handlers: one is keyup and the other one is change. So whenever those events are triggered we want to handle them. So this is the function that's going to handle them. So what do we want to do on keyup and when the text in the text box in the search text box changes? We want to search this column, right. So dataTableColumn.search function and to the search function we have to tell what we are searching for and where is that value going to be present — it's going to be present in the respective text box. So now we can use this.val() to get the value out of the text box and then once we have searched we want to retrieve the matching rows so I'm going to use draw function for that. Okay so pretty straightforward code there. So let's save our changes and let's go ahead and reload this.
Testing column filtering
Look at this when I type R look at that only those names that have R matches are displayed; all the others are filtered out. Similarly for example if I type S here it should match only two rows, right, and here if I type letter G look at that we get only one row. All right.
Compatibility: old vs new DataTable constructors
All right so now if you look at the constructor function that we are using we using the newer version. Now if I use the old version let's save these changes and let's reload our page and look at this when I type Rob for example now the filtering is not working. Okay and if we launch developer tools — so I pressed F12 — and if we look at the console we should have an error. So basically notice that it says columns is not a function. Okay so here we're using the old constructor function and if we have to use the new API then we have to use the API function and on that we can use columns. So now if I save this let's reload this page now we should not get that error and the search should again continue to work as it used to do. All right. So either use API function if you're using the old constructor; if you're using the new constructor function then you don't have to use that API function to use the new features. All right.
Moving filters to the header and preventing sort on click
So at the moment if you look at the search text boxes they're present within the footer. Now if you want them in the header for some reason then you could very easily change that. You have to do a couple of modifications: so instead of tfoot here we're going to change that to thead and here we are going to change that to tfoot and right here instead of footer I'm going to use header. So that's all. Let's save our changes reload this page and look at this now we have the search text boxes in the header. But there is one problem here: look at this when I click on the search ID text box the data is getting sorted. Every time I click on any of the search text boxes the data is being sorted by that column and we don't want that behavior. We want the data to be sorted only when I click on this little triangles, right. We don't want this sort when we click on these text boxes. So we want to prevent that. To do that what I'm going to do is we're going to reuse this selector so I'm going to cache that in a variable. So let's call this searchTextBoxes equals that expression right there and we can reuse this variable. So searchTextBoxes and here I'm going to use searchTextBoxes.on and now I'm going to wire up click function and to this function let's pass the event object and I'm going to say e.stopPropagation. Let's save our changes reload the page and look at this now when I click in the search text box the sorting is prevented. Right. And when we type for example Rob look at that the search functionality still works. And here are the steps that we have discussed. So this code basically include these two blocks of code to include the search text boxes in the header if you want them and the footer then these are the two code blocks that you need to include. Thank you for listening and have a great day.
