Pagination and info outside of the DataTables sDom control (solved)

josk

I need to show pagination and info elements outside of the DataTables sDom control. How I can do that kind of thing? If this is possible, please provide to me an example code.

If that is not possible am I able to close datatables wrapper DIV element right after when I'm closing the datatables ... ?

Background for this case: I have added jquery treeview component to the left side of the datatable.Clicking the treeview lists documents in the datatables element. Now I need to move those info and pagination elements to my own DIV element. I cannot do the layout modification using sDom. Im using smoothness theme and full_numbers pagination. I hope someone could help me with this problem.

-josk

TomC

What you want can be done with sDom. You just need to correctly apply your css. For example use sDom to insert a div in front of the table named leftColumn then remove the definition of table.display form the datatable css and add this css for your new div:
[code]
div.leftColumn {
float:left;
width:20%;
height:auto;
}
[/code]

You can use jQuery to move all your elements inside div.leftcolumn

talkitivewizard

You could also make your own pagination control if you wanted to.

Put your buttons anywhere you want to... and they could be any object... and do something like the following for 2 button control:

[code]
var oTable;
$(document).ready(function(){
oTable = $("#example").dataTable();

$("#paginate_left").click(function(){
oTable.fnPageChange( 'previous' );
});
$("#paginate_right").click(function(){
oTable.fnPageChange( 'next' );
});
});
[/code]

I hope this helps some.

josk

First of all I like to thank you for those replies. Its nice to be in so friendly and helping forum. I tried this solution to the problem:

[code]
$(document).ready(function() {
$('#example').dataTable( {
"sDom": '<"leftcolumn"><"rightcolumn"<"H"lfr>t><"bottombar"<"F"ip>>'
} );
$("div.leftcolumn").html('AND HERE I PRINTED IN ONE LONG ROW ABOUT 100 LINES OF TREEVIEW CODE.');
} );
[/code]

At least this way I was able to move columns like they should be. But I had to add 100 rows of html+javascript code to the one variable without any line breaks. And somehow it mess that treeview code so it doesnt work anymore.

TomC: My problem wasn't to get treeview leftside of the datatable. I needed to get that paging element under the treeview + datatable component. That wasn't anymore so simple task to do.

talkitivewizard: Thanks for the solution. I think I am not able to add those page numbers buttons this way, am I right? I had to test your method tomorrow morning.

I think there must be some kind of javascript code that I can put in the page and it prints these datatable elements? If someone know the way, let me know.

Or if someone know how I am able to add 100 lines custom code that is printed in the between these datatable elements.

-josk


EDIT: argh, its not working

josk

Maybe I can move those pagination using append? Have to test tomorrow.

[code]$('.new_place_for_pagination').append($('#toolbar_div'));[/code]

http://api.jquery.com/append/

talkitivewizard

Actually That's not a bad Idea... What I did was the following:
[code]
jQuery("#numbers_numbers").ready(function(){
jQuery("#trigger_report_paginate").appendTo(jQuery("#numbers_numbers"));
});
[/code]
Where #numbers_numbers was another div elsewhere on the page and trigger_report was the ID of my table. Worked beautifully for me.

josk

Yep, that "appendTo" solved my problem too.