Member Avatar for andi-dev 
<div class="datagrid"><table>
<thead><tr><th>header</th><th>header</th><th>header</th><th>header</th></tr></thead>
<tfoot><tr><td colspan="4"><div id="paging"><ul><li><a href="#"><span>Previous</span></a></li><li><a href="#" class="active"><span>1</span></a></li><li><a href="#"><span>2</span></a></li><li><a href="#"><span>3</span></a></li><li><a href="#"><span>4</span></a></li><li><a href="#"><span>5</span></a></li><li><a href="#"><span>Next</span></a></li></ul></div></tr></tfoot>
<tbody><tr><td>data</td><td>data</td><td>data</td><td>data</td></tr>
<tr class="alt"><td>data</td><td>data</td><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td><td>data</td><td>data</td></tr>
<tr class="alt"><td>data</td><td>data</td><td>data</td><td>data</td></tr>
<tr><td>data</td><td>data</td><td>data</td><td>data</td></tr>
</tbody>
</table></div>



CSS

.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } 
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #36752D; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.datagrid table td, .datagrid table th { padding: 3px 10px; }.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #36752D), color-stop(1, #275420) );background:-moz-linear-gradient( center top, #36752D 5%, #275420 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#36752D', endColorstr='#275420');background-color:#36752D; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #36752D; } .datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #275420; border-left: 1px solid #C6FFC2;font-size: 12px;font-weight: normal; }.datagrid table tbody .alt td { background: #DFFFDE; color: #275420; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }.
datagrid table tfoot td div { border-top: 1px solid #36752D;background: #DFFFDE;} .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div{ padding: 2px; }.datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }.datagrid table tfoot  li { display: inline; }.datagrid table tfoot li a { text-decoration: none; display: inline-block;  padding: 2px 8px; margin: 1px;color: #FFFFFF;border: 1px solid #36752D;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #36752D), color-stop(1, #275420) );background:-moz-linear-gradient( center top, #36752D 5%, #275420 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#36752D', endColorstr='#275420');background-color:#36752D; }.datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none;border-color: #275420; color: #FFFFFF; background: none; background-color:#36752D;}div.dhtmlx_window_active, div.dhx_modal_cover_dv { position: fixed !important; }
  • 4 Contributors
  • 9 Replies
  • 377 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Quick summary and practical options. The thread shows a single table whose footer contains paging links; the goal is that clicking “Previous/1/2/Next” swaps the visible rows but stays on the same page. If every row is already present in the DOM, client-side show/hide or in-browser pagination is simplest (as suggested). If rows live in a database, implement server-side paging and load page fragments with AJAX (as hinted — a ready-made plugin exists for this, and it supports both client- and server-side modes).

Recommended pattern and accessibility notes. Keep one semantic <table> and replace its <tbody> when navigating (avoid rendering multiple full tables for each page). Make paging links real anchors (href=/table?page=2) so the UI degrades gracefully without JS. Intercept clicks with delegated JS, show a small loading indicator, fetch either an HTML tbody fragment or JSON, swap the rows, call history.pushState to keep Back/Forward behavior, and move focus into the new table body for screen-reader users.

Minimal example (delegated jQuery handler that requests an HTML partial and replaces tbody):

$('.datagrid').on('click', 'tfoot a', function(e){
  e.preventDefault();
  var url = $(this).attr('href');
  $('.datagrid .loading').show();
  $.get(url).done(function(html){
    $('.datagrid table tbody').html(html);
    $('.datagrid .loading').hide();
    $('.datagrid table tbody tr:first td:first').attr('tabindex',-1).focus();
  }).fail(function(){ $('.datagrid .loading').hide(); alert('Failed to load page'); });
});

Troubleshooting checklist. Use the browser Network panel to confirm the server returns either tbody HTML or a JSON array (and adjust row-building accordingly); use delegated event handlers so pagination still works after DOM replacement; pretty-format HTML/CSS (as noted) to simplify selectors; cache pages if repeated navigation is common. For a full-featured drop-in solution (sorting, export, server-mode), consider a mature table plugin rather than hand-rolling everything.

Recommended Answers

All 9 Replies

Member Avatar for andi-dev

i have create this table with button number.
if i click in number 1,2 ore 3 it will show another content but it will stay in the same page which is the main page.
any idea how i can fix this

Member Avatar for JorgeM

If all of the data is included on the page at download time, you can use javascript/jQuery to show/hide data on the page. Otherwise if you have to retrieve data from the web server, you'll probably need some additional help from some server side scripting to introduce logic on handling which button was clicked, what data to send back, etc...

Member Avatar for Member #120589

What button? Are you talking about links? Fix what? You don't show your javascript so difficult to know what's working and what's not.

Tip:

Prettify your html - it's hard to read.
Is there any purpose to the CSS? Also format that - it's hard to read too.

Member Avatar for andi-dev

i have create a simple table with some data inside.
i wont to click in the previows button and it must show another table with another data but in the website

Member Avatar for pixelsoul

What you're asking for is pagination like used with large data sets, to split out the results into different "pages". JorgeM gave a good suggestion on where you would need to start.

Here is an example done with jQuery and a plugin http://datatables.net/

Member Avatar for andi-dev

yeahh that is what i was looking for.
can i download that table??

Member Avatar for andi-dev

can i download that table??

Member Avatar for Member #120589

can i download that table??

What you missed the download button? So you had to ask twice? Heh.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.