How to create Pagination for HTML table in JSP

[Ramakrishna Udupa]

Hi,

I've HTML table and user form in the same JSP. I can add rows by dynamically depending on the user entered data in the user form using ajax and jquery(used struts-2, without page refreshing) in JSP page. I want pagination for the HTML table, I tried DATATABLES plugin, But din't get how to use that in my JSP page. Is there any experts in DATATABLES converting HTML tables into DATATABLES or Is there any other simple solutions for the pagination? Please reply as soon as possible.

Thanks:

[J. Kevin Robbins]

I've used DataTables for several pages and found it to be very useful once you get over the learning curve. The site documentation leaves a lot to be desired, but to his credit, the author works hard to be helpful and answer questions in the forum.

It sounds like you just need to get your table initialization setup correctly and that can be very confusing. Post the code that you've tried so far and I'll try to help.

btw, I found this page to be more helpful than the tutorials on the DataTables web site.

This probably needs to be bounced over to the Javascript forum...

[Ramakrishna Udupa]

Thanks for the reply,

My whole code is HERE. If possible, Just copy and paste to your eclipse with necessary .jars(to know what's happening in my code). So, now I've to apply data tables for that. I included two .js files in my JS folder which is in Java Resources(right click on project folder->new->source folder->JS) folder. In script tags in header part of my index.jsp I included these tags.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
(for path, I right click on .js file->properties->path)


In my jQuery - Ajax part I included single line i.e., $("#table").dataTable();

$(document).ready(function() {
		$("#button").click(function() {
			
			var username=$('#form').serialize();
			$.getJSON('http://localhost:8080/Struts2Ajax/ServerTime.action?', username,function(data) {
			tabrow='<tr><td>'+data.username+'</td><td>'+data.gender+'</td><td>'+data.age+'</td></tr>';
			$('#table').append(tabrow);
			$('#button').unbind('click');
			$("#table").dataTable(); (**This is my extra added code**)
			});
		 });

	});

I got this much. After That I don't know what to do. Please see the code and help me. If possible explain and send the code. Once again thanks a lot for reply. Please reply as soon as possible.

Thanks:
Ramakrishna K.C

[J. Kevin Robbins]

It appears you are using client-side processing where you build the table and then let DataTables format the table. That's fine and it's the easiest route to getting starting. But what is the result when you run this code?

I don't have Eclipse or Struts so I'm not going to try and recreate your project, but I think we can resolve this without doing so.

Check that link I just added to my previous message. That single line of code you added "$("#table").dataTable();" should be enough to get you started. If it's throwing an error, post it. Once you get that working you can tweak the options like sorting and display length, but the defaults should get you a good looking table with pagination, search, and length changing.

[J. Kevin Robbins]

Make sure your app is finding the javascript files. Your script entries don't look correct. Mine are like this:

<script type="text/javascript" src="${pageContext.request.contextPath}/common/scripts/jquery-1.8.2.min.js"></script>

Note the full path from the context root.

[jiju ka]

Another way to do pagination is by using displaytag..
http://www.displaytag.org/1.2/

Depending on your non functional requirements... especially the system response time...you may choose a client side pagination or server side pagination.
displayTag is server side pagination.

Few questions about client side pagination..
1. If you have 50 items to display in a page why should the server send all (say around 50000) items to the client?. How much response time and bandwidth you will save if you limit the retry to the page length?
2. Can the limitation to the view (number of items) be passed to the retry mechanism?
3. Do you have sorting to do? if so can it be done at retry side?
4. Are you caching the data in business layer or in session? If you are caching the data, client side pagination is better. But whether to cache or not is a different question.
5. Is your application clustered?
6. Can other users update the data store while one user is viewing?
7. A user can manually go through 8 to 10 pages at a time. If there are 100's of such pages a search/filter utility could limit the number of items.

If the total number of items is negligible, client side pagination is OK.

[J. Kevin Robbins]

Jiju makes good points about client side versus server side. DataTables will do both, but I recommend that you get comfortable with client side first because server side is a bit more complex to setup.

[Ramakrishna Udupa]

Hi,

* This post is edited below. Don't see this. Just See the 1st Images of this posts*

I agree, My .js included thing is showing error in firebug (404 ERROR). After that I given path from local machine like C:/js/(attached java scripts).js as a src. Now It's not showing any error in fire bug. That means all .js included. When I run the program, It simply add rows to table without applying any properties of DATATABLES and also without showing any error messages. Just as usual. Using Same code as I posted you. Here is my snapshots of every thing.


I don't have any idea about 1st and 3rd errors. Don't care of 2nd error. That belongs to another things. In 1st it is telling *Type Error: $(...).dataTable is not a function*.

Please see this attachments and help me guys.

Thanks:
Ramakrishna K.C

[Ramakrishna Udupa]

Hi All,

I got the partial result. But still some of the things are going Wrong.

1)When I add 1st row to this HTML dynamic table, It is correct. i.e It applies all CSS and bottom index (showing 1 to 1 of 1 entries) is correct. When I entered 2nd row CSS will not apply and bottom index doesn't change. Bottom index will be same i.e (showing 1 to 1 of 1 entries).

2)When I select 25 in "Show" dropdown, It refresh all the things(contents in HTML table) except 1st row (1st row with CSS).
Below I attached snapshot. Please look that.

1st.PNG is already there in my previous Post.

[Ulf Dittmer]

+1 on the DisplayTag recommendation.

[Ramakrishna Udupa]

Sorry, I dint get you Ulf Dittmer....

[J. Kevin Robbins]

After you add a row to the table, call the fnDraw function of DataTables to refresh the table.

$(document).ready(function() {
  var oTable = $('#example').dataTable();
   
  // Re-draw the table - you wouldn't want to do it here, but it's an example :-)
  oTable.fnDraw();
} );

[J. Kevin Robbins]

Ulf Dittmer wrote:+1 on the DisplayTag recommendation.

Yes, that does look very interesting. I like the way it works on collections instead of just existing tables. Pagination looks rather complex, and it's too bad it doesn't support jQuery-ui themes. But I'm going to download it and check it out anyway. The built-in Excel export might make it worth the effort.

[Ramakrishna Udupa]

Hi,

$('#table').append(tabrow);
		 var oTable = $('#table').dataTable();
		  oTable.fnDraw();  

like this?? Its not coming in this way. Only one row I can add see the output.PNG, After that no response. Like this. Submit multiple times, result is one row itself. In server action is taking, that is for sure. But in JSP no response. I got the control flow, But I don't know how to correct that. When I click submit button 1st time everything is ok. When I click submit again then the line **$('$table').append(tabrow)** 'll execute. Second line ** var oTable = $('#table').dataTable();** also executed without applying CSS. But when control flow goes to third line, it'll remove the newly appended line(2nd line without CSS one) and shows again 1st line with applied CSS.

[J. Kevin Robbins]

Try using the DataTables function fnAddData to add your new row instead of append. You may not even need to call fnDraw when using the DataTable methods, I'm not sure.

The api for DataTables is here. Be sure to check out the support forums on this site. The people there have a lot more expertise than me.

Don't give up. As I said, there is a serious learning curve for this product, but once you get it working, it's very slick. I struggled for many days the first time I used it but in the end I was very pleased with the results.

[Ramakrishna Udupa]

Hey,

Thanks guys. I got that. Thanks J. Kevin Robbins. Adding new row instead of append, It worked me. Thanks for API.

Thanks:
Ramakrishna K.C

[Ramakrishna Udupa]

Hi,

In data-tables update function is not working for me and also delete function for rows. here is my code,

this is for cell update,

oTable.fnUpdate( uname, parseInt(updateValue), 0 );
			oTable.fnUpdate( ugender, parseInt(updateValue), 1 );
			oTable.fnUpdate( uage, parseInt(updateValue), 2 );
			

I tried this method, but it is not updating properly.

this is for row update,

oTable.fnUpdate( [uname, ugender, uage], parseInt(updateValue) );

Sometimes it works fine, but sometimes not. I'm confused, please see and tell me, any bug in my code or in data-tables source code.Because I'm sure, I'm passing perfect row counts.

here [uname, ugender, uage] are the values to update for the praticular row. Row number is in updateValue. I tried this. This is not working. If I want update 2nd row in table, I passed the updateValue as '1'. But it is updating 1st row. I confirm that the updateValue what I'm passing is 2 to update the 1st row. Datatables takes values from 0. Please help me guys, as soon as possible.


here is my full code,

function happening when I want to update,

$("#button").click(function() {
		
			var oTable=$('#table').dataTable();
			updateValue=$('#hiding').val();
			value=$('#increment').val();
		if(updateValue > 0){
			alert('update');
			uname=$('#username').val();
			ugender=$('#gend').val();
			uage=$('#age').val();
			alert(updateValue);

// TRYING THIS ALSO
			/*oTable.fnUpdate( uname, parseInt(updateValue), 0 );
			oTable.fnUpdate( ugender, parseInt(updateValue), 1 );
			oTable.fnUpdate( uage, parseInt(updateValue), 2 );*/


			
			oTable.fnUpdate( [uname, ugender, uage], parseInt(updateValue)-1 ); // Row
			
			alert(parseInt(updateValue)-1);
			$('#hiding').val(0);
		}

click on row, capturing row index,

$("#table tr").live("click", function(){
			arr=[];
			 $(this).find('td').each(function(){
					arr.push($(this).text());
			 });
			 $('#username').val(arr[0]);
			 $('#gend').val(arr[1]);
			 $('#age').val(arr[2]);

			$('#hiding').val(($(this).index()+1));		
		});	

this is in my JSP,

<body>
	<s:form id="form">
		<s:textfield label="Name*" key="Username" id="username"/>
		<s:textfield label="Gender*" key="Gender" id="gend" />
		<s:textfield label="Age*" key="Age" id="age"/>
	</s:form>
	<sj:submit label="Submit" targets="result" button="true" id="button" />
	<s:form id="form2">
		<table border="1" cellspacing="0" align="left" id="table" cellpadding="10" class="something">
			<thead>
				<tr>
					<th>Name</th>
					<th>Gender</th>
					<th>Age</th>
				</tr>
			</thead>
		</table>
	</s:form>
	<input type="text" id="hiding" value="0" />
	<input type="text" value="1" id="increment"/>
</body>

Thanks

[J. Kevin Robbins]

I see you posted this 3 days ago, but I missed it. Before I dig into this, is it still an issue? Have you tried asking on the DataTables support forums?

[Ramakrishna Udupa]

Hi Kevin,

No problem. Issue Solved. Thanks for the reply.

Thanks:
Ramakrishna K.C

[J. Kevin Robbins]

I'm glad you got it figured out. DataTables can be challenging at first, but it's worth the effort.