Search

When displaying grouping rows with RowGroup, you aren't limited to just a single cell of data spanning the entire width of the table - you can insert a row that makes use of the columns defined in the host table by returning either a tr element with the data you want to show, or a jQuery object containing that row. This example demonstrates the creation a grouping row that contains aggregate data which aligns with the host table's columns, making it quick and easy for the end user to understand a summary of that data.

This example shows how Responsive can be used with server-side processing in DataTables to cope with very large tables. No special considerations are required, just initialise Responsive as you normally would! Please note that the table's container has been artificially reduced in width for this example to make sure that Responsive hides columns for the demo!

This example exactly matches the functionality of the class control example but in this case the classes are assigned using the initialisation option">columns.className option.

KeyTable fully supports DataTables server-side processing mode which can be used to display a DataTable that contains thousands or millions of records. The interaction options of KeyTable operate in exactly the same way for server-side processing, as shown in this example (try using the arrow keys to move focus from one page to another for example).

In addition to supporting DataTables' built in scrolling options, KeyTable also supports the Scroller extension for DataTables. As you can see in the example below, no additional configuration is required beyond simply enabling Scroller and KeyTable.

This example shows how FixedColumns can be used with server-side processing in DataTables to cope with very large tables. No special considerations are required, just initialise FixedColumns as you normally would! Note that the table width is constrained in this example to allow scrolling to occur as the server-side processing data set has a limited number of columns in this demo!

A typical interaction to want to perform with a fixed column, is an index column. A method for how this can be achieved with FixedColumns is shown in this example, building on the index column example for DataTables. Also shown in this example is how the fixed column can be styled with CSS to show it more prominently.

This example demonstrate's FixedColumns ability to operate with complex headers (colspan and rowspan) and multiple rows in the table header or footer. It should be noted that the fixed column delineation point should not have a colspan cell going through it. It will not automatically split the cell into fixed and non-fixed parts.

This example shows a possible use of the FixedColumns API methods that can be used to control the fixed state of table columns. They are: fixedColumns().start() - Getter/Setter for the number of fixed columns at the start of the table fixedColumns().end() - Getter/Setter for the number of fixed columns and the end of the table. In this example there are 4 buttons to increase / decrease the number of start / end fixed columns. They do this by getting the current number of fixed columns, then making another call to increase or decrease that value. See the code below the table. Increase number of fixed columns at start Decrease number of fixed columns at start Increase number of fixed columns at end Decrease number of fixed columns at end

This example shows the date / time input with Moment used to provide formatting.

assigned to module // return { init: function() { _componentDatatableBasic(); } } }(); // Initialize module

this is my table init: var table = new DataTable('#categoriesTable',

The selector used to init Datatables, $('#milestoneopptable').DataTable(...);, doesn't match

the windows opener and init the table $(document).on('click', '#addEvabtn',

aftewards during the datatable init. The colspan is in

set by scrollY at init. For example, in order

2.2s 8) 2.7s Datatable init DataTable({ select: { style: "multi+shift"

not(.noToggle)', name: 'columnVisibility', prefixButtons: [ { init: function (dt, btn) { btn.children().css('font-weight',

buttons:[ { text: 'Approve Hours', init: function(api, node, config) { $(node).removeClass('dt-button

definition in the Editor init code, for example: const