CODEWITHSUNDEEP
jquery
Vinod babu
Vinod babu

Reputation: 1

Column search using datatable - Jquery

I have a table with column names namely (FirstName, LastName, Age, Profession, Salary) . I have 3 search boxes namely (FirstName, LastName, Salary).

If i enter the name say "xyz" in FirstName text box, then the value "xyz" should be searched only in the FirstName column. Similarly if i enter the value "abcd" in lastname search box then the value "abcd" should be searched only in lastname column.

How do i accomplish the above functionality using jquery datatables.

Sample code //Search textbox 

<html><body>
    <div>
           <table width='100%'>
         <tr>
          <td >First Name:</td>    <td id='fname'><input type= "text"></td>
         </tr>

          <tr ><td >Last name:</td>      
             <td id="lname"><input type= "text"></td>
          </tr>

          <tr ><td >Age:</td>      
             <td id="age"><input type= "text"></td>
          </tr>

          <tr ><td >Profession:</td>      
               <td id='prof'><input type= "text"></td>
          </tr>

          <tr ><td >Salary:</td>   
               <td id='sal'><input type= "text"></td>
          </tr>
           </table>
    </div>

//Table

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
                <th>Profession</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>Nixon</td>
                <td>61</td>
                <td>Engineer</td>
                <td>320,800</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>63</td>
                <td>Accountant</td>
                <td>170,750</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>66</td>
                <td>Junior Technical Author</td>
                <td>86,000</td>
            </tr>
            <tr>
                <td>Cedric </td>
                <td>Kelly</td>
                <td>22</td>
                <td>Senior Javascript Developer</td>
                <td>433,060</td>
            </tr>
       <tr>
                <td>Charde </td>
                <td>Marshall</td>
                <td>36</td>
                <td>Regional Director</td>
                <td>470,600</td>
            </tr>
            <tr>
                <td>Haley </td>
                <td>Kennedy</td>
                <td>43</td>
                <td>Senior Marketing Designer</td>
                <td>313,500</td>
            </tr>
     </tbody>
 </table>
</body>
</html>

//Jquerycode

 $(example).dataTable().
                    columnFilter({aoColumns:[
                            { sSelector: "#fname"},
                            { sSelector: "#lname" },
                            null
                            null,
                            {sSelector: "#sal"},
                       ]}            
             );

Upvotes: 0

Views: 392

Answers (1)

xander
xander

Reputation: 1765

column().search()

var table = $('#example').DataTable();

// #column3_search is a <input type="text"> element
$('#column3_search').on( 'keyup', function () {
    table
        .columns( 3 )
        .search( this.value )
        .draw();
} );

Upvotes: 1

Related Questions