如何实现数据表选择过滤器

Question

Here is my Screen

I am trying to use data tables

I am having this in the main page

$('#student-listing-table').dataTable();
$('#student-listing-table').find('label').html('Search By Name');
$('.dataTables_filter').wrap('<div class="Filter_wrap"><label>Account Status: <select name="Accountstatus" class="AccountstatusOption searchFilterAdded"><option value="1">Active</option><option value="2">Blocked</option></select></label><label>Availability: <select name="Avialbility" class="AvialbilityStatus searchFilterAdded"><option value="1">Online</option><option value="2">Offline</option></select></label></div>');

And here is my Table

<table class="student-listing-table" id="student-listing-table">
  <thead>
    <tr>
      <th>
        Photo
      </th>
      <th>
        Contact Details
      </th>
      <th>
        Taxi Plate Number
      </th>
      <th>
        License Number
      </th>
      <th>
        Activation Code
      </th>
      <th>
        Account Status
      </th>
      <th>
        Availablity
      </th>
      <th>
        Action
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="studen-list-photo">


          <img src="http://localhost/masnataxi/public/assets/uploads/driverimage/AC6751-DriverPhoto.png" class="student-listing-photo" alt="Driver Photo">
        </div>
      </td>

      <td>
        <span class="drive-name">
          Sulthan Allaudeen
          </span>

          <span class='drive-phone'>
            9042445010
          </span>
              </td>
              <td>
                taxi no plate
              </td>
              <td>
                9999
              </td>
              <td>
                AC6751
              </td>
              <td>

                <span class='account-blocked'>
                </span>
                <td>
                  <span class='avial-offline'>
                  </span>
              </td>
              <td>

                <a href="http://localhost/masnataxi/editdriver/3">
                  <button class="edtit-btn btn-sm">
                    <span class="icon">
                    </span>
                  </button>
                </a>
                <a href="javascript:;" id="http://localhost/masnataxi/deletedriver/3" class="btnOpenDialog">
                  <button class="delete-btn btn-sm">
                    <span class="icon">
                    </span>
                  </button>
                </a>
              </td>
          </tr>
          <tr>
            <td>
              <div class="studen-list-photo">


                <img src="http://localhost/masnataxi/public/assets/images/profile-inner.png" class="student-listing-photo" alt="Driver Photo">
              </div>
            </td>

            <td>
              <span class="drive-name">
                ram kumar
              </span>

              <span class='drive-phone'>
                9042445010
              </span>
            </td>
            <td>
              taxi no plate
            </td>
            <td>
              9999
            </td>
            <td>
              AC7262
            </td>
            <td>

              <span class='account-active'>
              </span>
              <td>
                <span class='avial-offline'>
                </span>
            </td>
            <td>

              <a href="http://localhost/masnataxi/editdriver/4">
                <button class="edtit-btn btn-sm">
                  <span class="icon">
                  </span>
                </button>
              </a>
              <a href="javascript:;" id="http://localhost/masnataxi/deletedriver/4" class="btnOpenDialog">
                <button class="delete-btn btn-sm">
                  <span class="icon">
                  </span>
                </button>
              </a>
            </td>
          </tr>
          <tr>
            <td>
              <div class="studen-list-photo">


                <img src="http://localhost/masnataxi/public/assets/images/profile-inner.png" class="student-listing-photo" alt="Driver Photo">
              </div>
            </td>

            <td>
              <span class="drive-name">
                test tetete
              </span>

              <span class='drive-phone'>
                33
              </span>
            </td>
            <td>
              et
            </td>
            <td>
              te
            </td>
            <td>
              AC3031
            </td>
            <td>

              <span class='account-active'>
              </span>
              <td>
                <span class='avial-offline'>
                </span>
            </td>
            <td>

              <a href="http://localhost/masnataxi/editdriver/5">
                <button class="edtit-btn btn-sm">
                  <span class="icon">
                  </span>
                </button>
              </a>
              <a href="javascript:;" id="http://localhost/masnataxi/deletedriver/5" class="btnOpenDialog">
                <button class="delete-btn btn-sm">
                  <span class="icon">
                  </span>
                </button>
              </a>
            </td>
          </tr>
  </tbody>
</table>

I tried this link in Googlecode to get the select filter and tried with the following code. It didn't worked when i change the dropdown

Note :

I can able to print 0 and 1 for the active and inactive in hidden form, will that help in the select filter.

I also tried in from this source

Please help to implement the select filter using the data table.

$(document).ready(function(){
     $('#example').dataTable()
          .columnFilter({
            aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman']  },
                     { type: "text" },
                     null,
                     { type: "number" },
             { type: "select" }
                ]

        });
});

Update :

$(document).ready(function() {
    $('#driver-listing-table').DataTable( {
        initComplete: function () {
            var api = this.api();

            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
    $('#driver-listing-table').find('label').html('Search By Name');
$('.dataTables_filter').wrap('<div class="Filter_wrap"><label>Account Status: <select name="Accountstatus" class="AccountstatusOption searchFilterAdded"><option value="1">Active</option><option value="2">Blocked</option></select></label><label>Availability: <select name="Avialbility" class="AvialbilityStatus searchFilterAdded"><option value="1">Online</option><option value="2">Offline</option></select></label></div>');

} );
</script>

Answer 1

You don't need to have anything special in your jquery

Just include the tfoot in your table

<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>

And if you use datatables it should automatically fill the dropdown filter for you.

Here is the only script that you need to add in your head section

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            var api = this.api();

            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );

 } );