Solved

check boxes not adding to jquery data table pagination

Posted on 2013-01-10
9
4,432 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 82

Expert Comment

by:leakim971
Comment Utility
hidden checked row from where? the server? right?
0
 

Author Comment

by:Gangadhara Melukote
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

763 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

7 Experts available now in Live!

Get 1:1 Help Now