Solved

check boxes not adding to jquery data table pagination

Posted on 2013-01-10
9
4,501 Views
Last Modified: 2013-01-25
Hi All,

I used data table plugin to display the table data. I need to add check boxes to the first column of the table based on the table row value. I mean, If the table row contains the string 'update available', then the first column of that row will be added with a check box and on click of 'Submit', need to collect all the checked rows and send that to server. This is working good for the first page of the table but not for the paginated pages. Below is the code snippet.

$(document) .ready(function (){
  $('#myTable').dataTable(
      {"aaSorting": [[6, 'asc']]}
     );
  $('#myTable tbody tr').each(function(){
       var rowTxt = $(this).text();
        if(rowTxt.indexOf("update available")>0){
            $(this).find('td:eq(0)').each(function(){
                   $(this).html('<input type="checkbox" class="chex"/>');
              });
        }
     });
   

    $('#submitButton').click(function(){
       $('#myTable tbody tr:has(input:checkbox:checked)').each(function(){
                 //collectingl the row values of the checked rows.
          });
     });
 
});

Browser: IE 8 (IE is standard in our comapny)

For my understanding, it is working good for the first page since it is visible. How to make this work for the hidden pages? Also if the user clicks the check boxes of the paginated pages, how to collect the checked rows at the time of submitting?

Thanks in advance.
0
Comment
Question by:Gangadhara Melukote
  • 5
  • 4
9 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38765762
replace your whole code by the following :
	$(document) .ready(function (){

		$('#myTable').dataTable({
			"aaSorting": [[6, 'asc']],
			"fnCreatedRow": function( nRow, aData, iDataIndex ) {
				var rowTxt = $(nRow).text();
				if(rowTxt.indexOf("update available")>0){
					$('td:eq(0)', nRow).html('<input type="checkbox" class="chex"/>');
				}
			}
		});

		$('#submitButton').click(function(){
			$('#myTable tbody tr:has(input:checkbox:checked)').each(function(){
				//collectingl the row values of the checked rows.
			});
		});

	})

Open in new window

0
 

Author Comment

by:Gangadhara Melukote
ID: 38765842
Thanks leakim971 for your quick response.

Adding check boxes to the paginated pages worked good. But retrieving the row data for the checked rows getting only 'current page' data but not the row data of other pages. Can you please assist me on this?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38766654
what about :
- each time you click a checkbox you send its value to the server side in a session variable
or :
- each time we change page, you send the whole checkboxes values
0
 

Author Comment

by:Gangadhara Melukote
ID: 38767188
Each time when page get loads, need to collect the checked rows from the current page as well as paginated pages and send that to server.

Even I made the event change trigger (.live(), .change()) on check box, but no luck. In this case, fetching the hidden checked row values (paginaged page) not getting.

Any idea on accessing the hidden checked rows?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 82

Expert Comment

by:leakim971
ID: 38767254
hidden checked row from where? the server? right?
0
 

Author Comment

by:Gangadhara Melukote
ID: 38767295
No. I am using only client side pagination. I called the 'hidden rows' for the paginated rows, since those are hidden from the active page.

Just an example, with paginated pages, you will select couple of rows from the first page, then click on second page, select some rows. On submitting the values, only 2nd page checked row values are getting, since 2nd page is active in the current window and 1st page is hidden.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38767314
If you send this hidden row each you click on to the server to save their state, its hidden for your browser NOT for your server. I understand you need theses hidden row value on the server not on the browser.

So, just send the value of theses hidden row in the current page(pagination) to the server EACH TIME you click (change) their state (checked or not)

$.post("saveCheckbox.jsp", $(".checkboxFirstColumnClass").serializeArray(), function() {});

What is saveCheckbox.jsp?
A JSP script saving all the "hidden" checkbox value in a SESSION variable (serialized array) or more than one if you prefer this model (an array of variable)
0
 

Author Comment

by:Gangadhara Melukote
ID: 38767534
This is really good option, but unfortunately it won't suit for my case, since I need to do some validation on checked rows before submitting to server. So I need to get all the rows on the browser.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 38767561
since I need to do some validation on checked rows before submitting to server

so use the callback of your ajax call to validate it with the server or javascript (in this case send back the whole array of checkboxes)
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

920 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

17 Experts available now in Live!

Get 1:1 Help Now