jQuery datatables individual column search

this is part one zero seven of take three tutorial in this video we'll discuss how to implement search functionality on everyday query data table column let me explain what I mean notice the example right here we've got a search text box across every column and notice what the search text box say so for first name it says search first name and the last name it says search last name so on and so forth now if we enter Rob for example in the search first name textbox then it should search only within the first name column and the matching rules 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 so if vbu this page in the browser at the moment this is how the table is standard 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 1 0 6 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 and add 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 this success callback function opening raised 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 tea food 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 tea food section and within the P food section we have got th elements so we want all those th elements I am going to use the jQuery each function and loop through each of those th elements now the first thing that I want is the title the header you know text so if you look at the pH elements we have the same set of th elements in the T head section as well as in the t food section they are present in the same order as well okay so what I'm going to do now is retrieve the header text from the pH elements that are present in the tea head section of this table okay and the reason why we need the text is because if you look at the text boxes here notice what they say the first name search text box a search first name similarly last name search text box is search last name so somehow we have to get that header text so to get that we are 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 t food here I'm going to use t head and let's use the jQuery EQ function and to this EQ function we can pass the index of the ph element within the array that this selector returns and since the th elements that are present in the tea head section t food section since they are in the same order the index of you know this th element matches the index of this th element in both the cases it is zero for first name it is one for last name it is two so on and so forth 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 am 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 as the ph element you know that's present in the tea head at section and notice the th element has got you know the text ID first name last name etc depending on the element that we are currently iterating over so I am 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 box and we want that text there within the text box to do that I'm going to use this keyword here download this so here this keyword again references the th element within the footer section that we are currently iterating over and on that I am going to use the HTML function and we want to you know 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 attribute and then we need to close the double quote and the input element itself right so 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 IDs a search ID search first name etc okay now I don't want to scroll to see them so I'm going to remove this crawl Y 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 these search text boxes okay alright now the border is not properly said that's because we have set a fixed width I mean fixed width to the development 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 1700 pixels and now it should properly surround the data table alright so now we have the search text boxes okay and at the moment you know this website column is not searchable that's because in the previous video session we have said searchable option to false let's include that in search by changing that - - okay right so now what we want to do whenever you know 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 key up event as soon as you know I key upon letter R we want that search to kick in so we want to handle key up and we also want to handle change event on this textbox so for that what I'm going to do is notice here we are 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 thing to keep in mind here is that if you look at you know the constructor function that we are using look at this when I press control space look at that there are two versions of data table right one with a small letter D and another one with capital letter days so what is the difference the constructor function with capital A today that's the new version okay and the one with small letter D is the old version so if you are using the old version and if you want to use the new API that comes with data tables then you will have to use API function on this variable if this is not clear at 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 data table with a capital letter D alright so now notice here we 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 element that we are currently the data column that we are currently iterating over and now dollar this dot footer so I'm using a function here dollar this dot futa 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 to event handlers one is key up 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 key up and when the text in the text box in the search text box changes we want to search this column right so data table column dot I'm going to use 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 dot value to get the value out of the text box and then once we have searched we want to retrieve the matching row 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 and look at this when I type our look at that only you know those names that have our row matches you know displayed all the others are filtered out similarly for example if I type s here you know it should match only two rows right and here if I type letter G look at that we get only one row all right so now if you look at another constructor function that we are using they're using the newer version now if I use the old version look at this we are using 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 ok and if we launch developer tools so I'm plus f12 and if we look at the console we should have an error so basically notice that it says columns is not a function ok so here we are using the old constructor function and if we have to use the new API then you know we have to use here look at that it's complaining that this columns is undefined basically so to get to that I'm going to use the API function and on that we can use in our 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 alright so a they use a PA 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 so at the moment if you look at you know the search text boxes they are 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 P food here we are going to change that to P head and here we are going to change that to P foot and right here instead of da I'm going to use header so that's all so let's save all 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 look at that the data is getting sorted every time I click on any of the search text box the data is being sorted by that column and we don't want that behavior we want the data to be sorted on when I click on these little triangles right we don't want this heart when we click on these text boxes so we want to prevent that so to do that what I'm going to do is we're going to reuse this selector so I'm going to cash or cash that in a variable so let's call this search text boxes equals that expression right there and we can reuse this variable so search text boxes and here I'm going to use search text boxes on so 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 dot stop propagation let's save our changes reload the page and look at this now when I click in the search text box this sorting is prevented right and when we type for example Rob look at that this 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 in the footer then these are the two code blocks that you need to include thank you for listening and have a great day

Channel: kudvenkat

Views: 80,863

Keywords: jquery datatables individual column filtering example, jquery datatables column search, jquery datatable column filter examples, jquery datatable column filter on top, jquery datatable column filter in header, jquery datatable vs datatable

Id: 7nTVWt89--I

Length: 15min 3sec (903 seconds)

Published: Mon Aug 03 2015