Skip to content

2. Table Settings

Emrah KONDUR edited this page Oct 22, 2022 · 10 revisions

Configuring Jquery datatable settings with helper is very easy.

Name

Calling datatable on client-side is possible with name:

.Name("GridName")

Default name is "DataGrid". If there are multiple grid in single page, different names should be given. Call grid if you need like this:

$(document).ready(function() {
      var table = $('#DataGrid').DataTable();
} );

Searching

This option allows the search abilities of DataTables to be enabled or disabled. Default is "true". Reference:

.Searching(false)

Ordering

Enable or disable ordering of columns - it is as simple as that! DataTables, by default, allows end users to click on the header cell for each column, ordering the table by the data in that column. Default is "true". Reference:

.Ordering(false)

Paging

DataTables can split the rows in tables into individual pages, which is an efficient method of showing a large number of records in a small space. The end user is provided with controls to request the display of different data as the navigate through the data. Default is "true". Reference:

.Paging(false)

Selecting

Select adds item selection capabilities to a DataTable. Items can be rows, columns or cells, which can be selected independently, or together. Reference:

.Selecting(true)
.Selecting(true, SelectItems.Checkbox)
.Selecting(true, SelectItems.Cell, SelectStyle.Single)

Processing

Enable or disable the display of a 'processing' indicator when the table is being processed. Default is true. Reference:

.Processing(false)

ScrollX

Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable horizontal (x) scrolling to show the table in a viewport, which can be scrolled. Reference:

.ScrollX(true)

Class

Default table css class is "display nowrap dataTable dtr-inline collapsed". It can be replaced with other table class like bootstrap "table table-striped".

.Class("table table-striped")

Captions

Adding some text on table header or footer with Captions method that:

.Captions("Top caption text...", "Bottom caption text...")

Fixed Columns

FixedColumns provides the option to freeze one or more columns to the left or right of a horizontally scrolling DataTable. Reference:

.FixedColumns(leftColumns: 1, rightColumns: 3)

Individual Column Searching

With this feature, data is be searchable column by column if column searchable is not false.

.ColumnSearching(true)

To give class for these inputs:

.ColumnSearching(true, "form-control")