Search

The exportOptions.columns option of the print button provides the ability to select only certain columns (using a column-selector). In this example only the visible columns are used for the printing. The column visibility buttons (colvis) are included in this example so the column visibility can be easily changed. Additionally, the last column in the table, Salary, is hidden by default (using columns.visible).

the table: orthogonal options and formatting functions as

to use the default options or given as an

the second is the options for the instance. In

are controlled by the options

The following example shows two DataTables enhanced tables both with FixedHeader enabled on them. This is done quite simply by initialising DataTables on both tables with the fixedHeader option set. This example also shows the footer being fixed in place for the two tables.

This example shows how to handle the case when the host DataTable is visible or not. FixedHeader needs to "be informed" if the table is visible or not (or if its position has changed on the page) so it can recalculate its cached values that are used to quickly look up what state the fixed header should be in at any given point. This is achieved through the fixedHeader.adjust() API method. This example shows a simple toggle button that changes the visibility of the DataTable. The fixedHeader.adjust() method is called whenever the table's visibility is changed, as it would be in a tab show event handler.

This example shows a scrolling DataTable being used with FixedHeader. The integration between this extension and scrolling tables has not been supported in the past, but it is now fully supported. With scrolling tables the header will behave as it does always with FixedHeader. The footer will no longer float at the bottom of the page when it is in it's fixed state. Instead the table will resize appropriately so that the footer is always at the bottom of the screen.

It is not uncommon to have a fixed element at the top or bottom of a web-page to act as a quick access menu to your end users. If you do employ this on the same page as FixedHeader, the software needs to be told to offset the fixed positioning of the header / footer. This can be done in one of two ways: Automatically, by assigning the class fh-fixedHeader or fh-fixedFooter to the fixed elements Using the fixedHeader.headerOffset and fixedHeader.footerOffset options. This example takes the second approach, using the fixedHeader.headerOffset option to assign a suitable offset.

It is not uncommon to have a fixed element at the top or bottom of a web-page to act as a quick access menu to your end users. If you do employ this on the same page as FixedHeader, the software needs to be told to offset the fixed positioning of the header / footer. This can be done in one of two ways: Automatically, by assigning the class fh-fixedHeader or fh-fixedFooter to the fixed elements Using the fixedHeader.headerOffset and fixedHeader.footerOffset options. This example demonstrates the first option where a header element has the class fh-fixedHeader assigned to it. FixedHeader automatically detects this element and will offset the header by the required amount.

I remove the chosen options altogether from the tables

Hi Andrey, The Options class has its own

rebuilding the select dropdown options. Imagine this example http://live.datatables.net/kijujaha/1/edit

type: "select", multiple: true, options: [ { "label": "Audio","value": "6"}, { "label":

This code, in your example, sorts and builds the select options: column.data().unique().each( function ( d, j ) { select.append( '<option value="'+d+'">'+d+'</option>' ); } ); You can replace it and build the options list in any order you like. Kevin

be filtered by selected options. i.e. when selecting 'IT

console.log(val); console.log(JSON.stringify(data)); var retValue = { "options": { "3": [ { label: "", value: 0

select. Rather than displaying/offering options relevant to all 3

hide the export buttons options $('.dt-button-collection').hide(); $('.dt-button-background').hide(); $('.DTE_Action_Edit').css('zIndex', 65000);

See this FAQ about options to increase Datatables initialization