Creating column definitions

Column definitions are created by instantiating the WebExtras.JQDataTables.AOColumn class

  AOColumn dtColumn = new AOColumn
  {
      sTitle = "First Column",    // Only the sTitle property is compulsory. All other properties are optional
      bSortable = true,
      sClass = "",                // any extra CSS class you would like to apply to this column
      sWidth = "10%",             // specified as a CSS width
      bVisible = true
  };  
  

Creating table settings

Table settings are created by instantiating the WebExtras.JQDataTables.DatatableSettings class

  
  // We need a collection of columns to be specified in the settings, so create an array from our column
  AOColumn[] dtColumns = new AOColumn[] { dtColumn };

  DatatableSettings dtSettings = new DatatableSettings 
  (
    5,                                      // specify the number of records per page
    dtColumns,                              // Column definitions
    new AASort(0, SortType.Ascending),      // specify one initial sort, multiple initial sorts, or leave null for no sort
    null,                                   // specify an AJAX source to retrieve data from
    "basic records",                        // specify a table footer suffix
    "150px"                                 // specify a maximum table height, once reached you will get scroll bars
  );
  

Creating table records

Table records are created by instantiating the WebExtras.JQDataTables.DatatableRecords class

  // Let's create the actual data to go into the table
  string[][] dtData = new string[][]
  {
    new string[] { "first column row 1" },
    new string[] { "first column row 2" }
  };

  DatatableRecords dtRecords = new DatatableRecords
  {
    iTotalRecords = dtData.Length,            // Total records in table
    iTotalDisplayRecords = dtData.Length,     // Total records to be displayed in the table
    aaData = dtData                           // The data to be displayed
  };
  

Creating the table object

Let us now bring all the different components together

  // Let's create the datatable object with an HTML ID, our settings and records
  Datatable dtable = new Datatable("demo-table", dtSettings, dtRecords);
  

Now let's see the output