Solved

check boxes not adding to jquery data table pagination

Posted on 2013-01-10
9
4,559 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
DevOps Toolchain Recommendations

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

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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)
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…

772 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