Solved

jquery datatables server side update to filter out inactive records

Posted on 2013-01-08

1 solution

1,566 Views

Last Modified: 2013-01-10

I have the following jQuery datatables initialization code and on the page

pTable = $('#myTable').dataTable({
					"bProcessing": true,
					"bServerSide": true,
					"bStateSave": false,
					"bAutoWidth:":false,
					"iDisplayLength":8,
					"sAjaxSource":"myServerSideScript”
					"bLengthChange": false
		}

Open in new window

Additionally I have a checkbox on the page above myTable that allows a user to see only records with an “active” status.

 Only active <input id="active" onClick="showActive(this)" type="checkbox" name="selected">							   
		</form>

Open in new window

I’m not certain what dataTables API to use (if there is even one) to accomplish this. Something like pTable.fnFilter(‘active’) but that keeps all the filtering and sorting already present in the table. Is there a function to update the server side call but maintain the filtering and sorting?
Thanks!

Comment

Question by:HyperBPP

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

4 Comments

LVL 1

Accepted Solution

by:tjyoung

tjyoung earned 500 total points

ID: 387583552013-01-09

Hi,
yes that is doable, no problem. Might want to use 2 radio buttons. Show active, show all or something like that. I've attached a jpeg of one of my tables showing filters in use. Relevant code for my table radio button other then the jquery for theshown below:

"fnServerParams": function ( aoData ) {
            aoData.push( {"name": "calltype", "value": $('input:radio[name="calltype"]:checked').val()} )
            },

You also need the fnReload linked up (check datatables.net, not sure on the name, might be fnDraw?). That is called when you click the radio button and reloads the table.

//radio button code calling the fnDraw
$("input:radio[name='calltype']").click( function () {
oTable.fnPageChange( 'first', false );
      oTable.fnDraw();
      } );

LVL 6

Author Comment

by:HyperBPP

ID: 387649332013-01-10

Works a charm! Thanks!

LVL 6

Author Closing Comment

by:HyperBPP

ID: 387649372013-01-10

Thanks! Works great!

LVL 1

Expert Comment

by:tjyoung

ID: 387651502013-01-10

Sure glad to help

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Using Ajax in CodeIgniter

Article by: Marco

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.

Comparison of JS Frameworks: Angular.js vs React.js vs Ember.js

Article by: Serhiy

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.

PHP, jQuery, and Form Actions

Video by: Marco

The viewer will learn how to dynamically set the form action using jQuery.

Introduction to jQuery (Part 2)

Video by: Jason

The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…