• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

How to create Pagination for HTML table in JSP

 
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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:
 
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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();




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
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Ranch Hand
Posts: 308
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
1st.PNG
[Thumbnail for 1st.PNG]
When I run 1st time. UI is here.
2nd.PNG
[Thumbnail for 2nd.PNG]
When I keep on adding data into tables. Please note, Here NO effect of datatables..
3rd.PNG
[Thumbnail for 3rd.PNG]
In firebug it is showing 3 types of errors. 1st is *TypeError: $(...).dataTable is not a function* . 2nd is *don
 
Ramakrishna Udupa
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
1strowadded.PNG
[Thumbnail for 1strowadded.PNG]
When I add 1st row. Perfect.
2ndrowadded.PNG
[Thumbnail for 2ndrowadded.PNG]
Started to more than 1 row. *Observe the marked places*.
3rdshowchanged.PNG
[Thumbnail for 3rdshowchanged.PNG]
When I changed the *Show* number. *Observe the marked places*.
 
Rancher
Posts: 43081
77
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
+1 on the DisplayTag recommendation.
 
Ramakrishna Udupa
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sorry, I dint get you Ulf Dittmer....
 
J. Kevin Robbins
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
After you add a row to the table, call the fnDraw function of DataTables to refresh the table.

 
J. Kevin Robbins
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,



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.
output.PNG
[Thumbnail for output.PNG]
after hitting submit button so many times, in server side action is executing but not in jsp page.
afteralertok.PNG
[Thumbnail for afteralertok.PNG]
Afetr cliking ok in alert. see the output.
 
J. Kevin Robbins
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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,



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

this is for row update,



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,



click on row, capturing row index,


this is in my JSP,


Thanks
 
J. Kevin Robbins
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 254
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Kevin,

No problem. Issue Solved. Thanks for the reply.

Thanks:
Ramakrishna K.C
 
J. Kevin Robbins
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I'm glad you got it figured out. DataTables can be challenging at first, but it's worth the effort.
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic