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.