CODEWITHSUNDEEP
jqueryhtmldatatables
MatthewMcGovern
MatthewMcGovern

Reputation: 3496

Struggling to position a total row at the bottom of a DataTables table

I've tried to post on their forum for the past two weeks but my posts or topics never show.

I create the table as HTML from the server side before converting it into a DataTable. The total is processed server side (as it's not as simple as just adding them all up, there's averages and all sorts). Here's the original table. As you can see, the Total row is ordered within the table like any other row.

I've tried putting the total row in the footer, but this causes the horizontal scroll bar to be in between the data and total row. See this example. This is because the horizontal scroll bar is applied to the tbody table. The footer is part of its own table due to how FixedColumns works... I tried to manually recreate the effect by disabling the horizontal scroll bar in the DataTables constructor and wrapping it in a fixed width div... It worked but FixedColumns didn't as it requires that a scroll width be set...

I've tried to restructure the table with jQuery during the draw callback of the DataTable, but FixedColumns makes such a mess of the HTML that I couldn't do it (there's about 4 tables, all in containing divs, all with hidden/stripped headers/bodys/footers just for the one table). I won't post the code as it wasn't functional, but it involved tagging the row with a class, finding said row, cloning it, remove the original, then append the cloned row to the bottom of the tbody. Even if this works it'll break the formatting too as odd/even rows were shifted to be next to each other =/

I tried to write my own sort function to always put the Total at the bottom but it only worked when sorting by the name (as that was the only time I had access to the words 'total' as it only has the data for that column).

I feel like I'm going about this totally wrong as surely someone's needed a server side total row before... All the examples I can find, are not using a FixedColumn.

Upvotes: 1

Views: 4417

Answers (2)

MatthewMcGovern
MatthewMcGovern

Reputation: 3496

I have fixed this by using a rather hacky piece of jQuery. Firstly, draw the Total row in the footer and then add this as a fnDrawCallback of the FrozenColumns constructor. Where #datatable_wrapper matches the ID of your table's ID.

var totalLabel= jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftFootWrapper table tfoot").clone();
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftFootWrapper table tfoot").hide();
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftBodyWrapper table tbody").append(jQuery(totalLabel).html());

var totalData = jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollFoot .dataTables_scrollFootInner table tfoot").clone();
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollFoot .dataTables_scrollFootInner table tfoot").hide();      
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollBody table tbody").append(jQuery(totalData).html());

A working example can be found here.

Upvotes: 2

davidkonrad
davidkonrad

Reputation: 85518

Let the #container do the scrolling instead

See this http://live.datatables.net/utacup/edit#javascript,html

1 - remove "sScrollX" : "100%" from the dataTable() initialization

2 - add this to <style> :

#container {
    overflow-x: scroll;
    width: 400px;
    max-width: 400px;
}

screenshot

enter image description here

Upvotes: 1

Related Questions