Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

check boxes not adding to jquery data table pagination

Posted on 2013-01-10
9
Medium Priority
?
5,069 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
[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
  • 5
  • 4
9 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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
 
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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Suggested Courses

609 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