Solved

jquery datatables server side update to filter out inactive records

Posted on 2013-01-08
4
1,529 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!
0
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
  • 2
  • 2
4 Comments
 
LVL 1

Accepted Solution

by:
tjyoung earned 500 total points
ID: 38758355
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();
      } );

table sample
0
 
LVL 6

Author Comment

by:HyperBPP
ID: 38764933
Works a charm!  Thanks!
0
 
LVL 6

Author Closing Comment

by:HyperBPP
ID: 38764937
Thanks!  Works great!
0
 
LVL 1

Expert Comment

by:tjyoung
ID: 38765150
Sure glad to help
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn how to dynamically set the form action using jQuery.
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…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question