Solved

How do I select all table rows using a checkbox in the header using Jquery datatable tabletools?

Posted on 2014-04-23
3
13,795 Views
Last Modified: 2014-05-04
New to JQuery.
Thanks.
0
Comment
Question by:RSSY
3 Comments
 
LVL 32

Expert Comment

by:Big Monty
ID: 40020199
One way would be to use the aoColumns property of datatables and just render your markup for the "sTitle" property as an html string.

http://www.datatables.net/usage/columns

//On datatable init the options would look something like this
"aoColumns": [{   "sTitle": "<input type='checkbox' id='selectAll'></input>"}]
Then you could just wire up a handler to the header checkbox after the datatable is created to check/uncheck all the checkboxes;

So something like:

$("#selectAll").toggle(function () {
       $("checkboxSelector", dataTable.fnGetNodes()).attr("checked", true); }
     , function () {
         $("checkboxSelector", dataTable.fnGetNodes()).attr("checked", false);
     }
 );
0
 
LVL 28

Accepted Solution

by:
sammySeltzer earned 500 total points
ID: 40020225
Since you don't have any code to work with, then I will leave it up to you to integrate this code below into yours:

<script type="text/javascript">
$('#checkall').click( function() {
$('input', oTable.fnGetNodes()).each( function() {
$('input', oTable.fnGetNodes()).attr('checked','checked');
} );
return false; // prevent page refresh
} );
</script>

Open in new window


//markup
<form id="checkall"><input type="submit"/></form>

Open in new window

0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

895 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now