how do I create pageable table

alex9134

I tried creating a table that can page results like
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
"lengthChange": true,
"page" : true
But it does not setup a table that I can that shows page options and I can Page thru results

kthorngren

Without seeing your full Datatables init code I would guess you are missing the l parameter of the dom option.

Kevin

alex9134

can you provide an example as I did find dom in the documentation but it does not create a table with paging
$('#example').dataTable( {
"dom": '<lf<t>ip>'
} );

colin

Hi @alex9134 ,

paging is enabled by default, see this zero configuration table here. If you are changing dom, you would need p for the pagination control.

Cheers,

Colin

kthorngren

Your code seems to work here:
http://live.datatables.net/mozudove/1/edit

It has the length menu and paging. Am I missing something in your problem description?

Kevin

alex9134

here is my table init but i dont have pagination control in a result set.I even created div wrapper around the table as per example but i still dont get paging

<

div class='wrapper'>

<

table class='ui celled table' id='event-table-"+this.key+" style='table-layout: fixed;'> \
<thead> \
<tr> \
<th data-field='state' data-checkbox='true'>REMOVE ALL</th> \
<th id='alarm'>AlarmID</th> \
<th>Date/Time</th> \
<th>

Image

</th> \
<th>

Weather

</th> \
</tr> \
</thead> \
<tbody>"+row+ "</tbody></table></div>");

                    $("#event-table-"+this.key).DataTable( {
                            "dom": '<"wrapper"flipt>',
                            "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                            "lengthChange": true,
                            "page" : true
                    });

alex9134

i create table from onclick handler in javascsript and even if it works in your example it does not work in my code i posted in my response

kthorngren

Maybe you can provide a link to your page or update my example to show the issue so we can help debug?

Are you seeing any errors in your browser's console?

Kevin

bindrid

"paging" not "page"

I copied and pasted your code here http://live.datatables.net/sojodode/1/edit and it worked as expected including paging.

I suspect something is wrong with the code that is actually generating the string that you are using to create the html.

if the string for your table is exactly as show above, you are missing some \

alex9134

thank you for those that answered my problem.I think the actual problem is that i am adding page control to hidden item.I think allan suggested I use $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust(); and I do it right after I make it visible.But I think I am missing an event when my table becomes visible and that is why my page control does not work in my case but works fine with other.I just dont know what event should trigger it

kthorngren

columns.adjust() will only fix the alignment of the columns. The paging feature should be working. Not sure how you are hiding the table but this example shows tables hidden in tabs work:
http://live.datatables.net/xidolayi/1/edit

Kevin

alex9134

i create a table based on the button pressed.the button onclick handler is called and generates that table. Data rows are concatenanted from rows retrieved from the table from <tr> to </tr> html tags and concatenated from a single result row to variable containing 140 individual rows. I assume that paging should still work

kthorngren

Data rows are concatenanted from rows retrieved from the table from <tr> to </tr> html tags and concatenated from a single result row to variable containing 140 individual rows. I assume that paging should still work

How are you adding these rows to the Datatable?

For Datatables to know about them you should use rows.add() or row.add() with draw(). Or if you are using a Javascript method to add the rows you can try rows().invalidate() to have Datatables refresh its data cache after the rows are added.

Kevin