How to get a button to do a filter?

th3t1ck

I have two buttons that I would like to filter the ajax data presented in the table with.

The filter would show a therapists status (ACTIVE, INACTIVE). When I click the "Show active" button the table should only show the therapists with an ACTIVE status and the "Show inactive" button when clicked should only show the INACTIVE status. Since I already have all the rows loaded in the table that show both ACTIVE and INACTIVE I thought a columns().search() should be all I need but I keep getting an 'Uncaught SyntaxError: Unexpected String' pointing to $('#active').on( 'click', function () {

var table = $('#vetted_therapists').DataTable( {
        dom: '<\"top\"Bfl>iprt<\"bottom\">p<\"clear\">',
        ajax: 'vetted_therapists-con.php',
        columns: [
            { data: 'vetted_therapists.id' },
            { data: 'vetted_therapists.specialty' },
            { data: 'vetted_therapists.first_name' },
            { data: 'vetted_therapists.last_name' },
            { data: 'vetted_therapists.address' },
            { data: 'lk_cities.city' },
            { data: 'lk_states.state' },
            { data: 'lk_zip_codes.zip_code' },
            { data: 'vetted_therapists.home_phone_number' ,
                  render: function ( data ) {
                                var hPhone=data;
                                if(hPhone.length > 9) {
                            hPhone='(' + hPhone.substring(0,3) + ') ' + hPhone.substring(3,6) + '-' + hPhone.substring(6,10);   
                            return hPhone;
                                }else{
                                   var empty='NA';
                                   return empty;
                                }
                    }
             },
            { data: 'vetted_therapists.office_phone_number',
                  render: function ( data ) {
                                var oPhone=data;
                                if(oPhone.length > 9) {
                            oPhone='(' + oPhone.substring(0,3) + ') ' + oPhone.substring(3,6) + '-' + oPhone.substring(6,10);   
                            return oPhone;
                                }else{
                                   var empty='NA';
                                   return empty;
                                }
                }
            },
            { data: 'vetted_therapists.office_phone_extension_number' },
            { data: 'vetted_therapists.office_phone_toll_free_number',
                  render: function ( data ) {
                                var otfPhone=data;
                                if(otfPhone.length > 9) {
                            otfPhone='(' + otfPhone.substring(0,3) + ') ' + otfPhone.substring(3,6) + '-' + otfPhone.substring(6,10);   
                            return otfPhone;
                                }else{
                                   var empty='NA';
                                   return empty;
                                }
                }
            },
            { data: 'vetted_therapists.work_phone_number',
                  render: function ( data ) {
                                var wPhone=data;
                                if(wPhone.length > 9) {
                            wPhone='(' + wPhone.substring(0,3) + ') ' + wPhone.substring(3,6) + '-' + wPhone.substring(6,10);   
                            return wPhone;
                                }else{
                                   var empty='NA';
                                   return empty;
                                }
                }
            },
            { data: 'vetted_therapists.work_phone_extension_number' },
            { data: 'vetted_therapists.cell_phone_number',
                  render: function ( data ) {
                                var cPhone=data;
                                if(cPhone.length > 9) {
                            cPhone='(' + cPhone.substring(0,3) + ') ' + cPhone.substring(3,6) + '-' + cPhone.substring(6,10);   
                            return cPhone;
                                }else{
                                   var empty='NA';
                                   return empty;
                                }
                }
            },
            { data: 'vetted_therapists.cell_phone2_number',
                  render: function ( data ) {
                                var c2Phone=data;
                                if(c2Phone.length > 9) {
                            c2Phone='(' + c2Phone.substring(0,3) + ') ' + c2Phone.substring(3,6) + '-' + c2Phone.substring(6,10);   
                            return c2Phone;
                                }else{
                                   var empty='NA';
                                   return empty;
                                }
                }
            },
            { data: 'vetted_therapists.fax_number',
                  render: function ( data ) {
                                var fPhone=data;
                                if(fPhone.length > 9) {
                            fPhone='(' + fPhone.substring(0,3) + ') ' + fPhone.substring(3,6) + '-' + fPhone.substring(6,10);   
                            return fPhone;
                                }else{
                                   var empty='NA';
                                   return empty;
                                }
                }
            },
            { data: 'tbl_code.location_code' },
            { data: 'tbl_location.location' },
            { data: 'vetted_therapists.email' },
            { data: 'vetted_therapists.military' },
            { data: 'vetted_therapists.status' },
            { data: 'vetted_therapists.notes' },
            { data: 'vetted_therapists.last_revised' }
         ],
         $('#active').on( 'click', function () {
           table.columns(21).search('ACTIVE').draw();
        } );,

And my html is as follows...

<tr><th colspan=24>
        <div class=\"container\">
           <label id='active' class=\"button\"><input type='submit' class='btn btn-primary' name='active' value='Show active')></label>
           <label id='inactive' class=\"button\"><input type='submit' class='btn btn-primary' name='inactive' value='Show inactive')></label>
        </div>
        </th></tr>
            <tr>
                          <th>ID</th>
                            <th>Specialty</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Address</th>
etc...

Help me, Obi-Wan Kenobi. You're my only hope.

kthorngren

Uncaught SyntaxError: Unexpected String

It looks like this code is inside the Datatables init code. You need to move it outside the init code and remove the comma.

         $('#active').on( 'click', function () {
           table.columns(21).search('ACTIVE').draw();
        } );,

Kevin

th3t1ck

You da man Kevin. It's working very sweetly now. Thank you again.

th3t1ck

So I am noticing that because I am searching/Filtering for ACTIVE/INACTIVE I am getting INACTIVE showing up while searching/filtering for ACTIVE. Is the an option for an exact match?

kthorngren

You can enable regex and disable smart searching for this. The search() API docs explain how each search mode works and how to change them. Also take a look at this example:
https://datatables.net/examples/api/regex.html

Kevin

th3t1ck

Thanks again for the reply. I did read the search() before and if I recall smart is the default. I'll give the regex a shot.