Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5246
  • Last Modified:

check boxes not adding to jquery data table pagination

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
Gangadhara Melukote
Asked:
Gangadhara Melukote
  • 5
  • 4
2 Solutions
 
leakim971PluritechnicianCommented:
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
 
Gangadhara MelukoteAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Gangadhara MelukoteAuthor Commented:
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
 
leakim971PluritechnicianCommented:
hidden checked row from where? the server? right?
0
 
Gangadhara MelukoteAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Gangadhara MelukoteAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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

Technology Partners: 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!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now