CODEWITHSUNDEEP
javascripthtmlajaxdatatables
Roman Pokrovskij
Roman Pokrovskij

Reputation: 9776

jquery datatables: how to shift columns mappings (because of inserted "row header column")?

I have added "row header column" to my table (rendered by datatables jquery plugin):

enter image description here

HTML:

<table id="main-table" class="table table-hover table-striped mainTable w-100">
    <thead>
        <tr>
            <th class="addNewHeader no-sort not-colvis">
                <a class="btn-sm" href="..." ><span class="material-icons">note_add</span></a>
            </th>
            <th>ID</th>
            <th>Part</th>
            <th>Released</th>
            <!-- other columns -->
        </tr>
    </thead>
    <tbody></tbody>
</table>

Data is accessed by ajax (send as an array, not as associative array).

The problem is that now I should re-arrange mappings for each column:

table = $('#main-table').DataTable({
    ajax: {"url": "..."},
    columnDefs: [
    {
          targets: 1,
          render: function (data, type, row, meta) {
             return row[0]; // table column 1, data column 0
          }
     },
     {
            targets: 2,
            render: function (data, type, row, meta) {
               return row[1];  // table column 2, data column 1
            }
      },
      {
            targets: 3,
            render: function (data, type, row, meta) {
               return row[2];  // table column 3, data column 2
            }
      },
      // and so on
    ];
});

It is too verbose.

Is it possible to configure the same (map data column X to table column X+1 ) in one line? Just to say: "please, shift columns" or "please, remove first row-header-column form mappings".

Upvotes: 1

Views: 399

Answers (2)

Roman Pokrovskij
Roman Pokrovskij

Reputation: 9776

So far the dynamic "default" configuration is the best found option:

dataColumnCount = 15;
tableColumnCount = dataColumnCount + 1;
 dtOptions.columns = new Array(tableColumnCount );
 // default:
 for (i = 0; i < tableColumnCount; i++) {
     dtOptions.columns[i] = { targets: i, data: i - 1};
 };
 // replace where it is required with custom renderer:
 dtOptions.columns[0] = {
     render: function (data, type, row, meta) { ..} }
 dtOptions.columns[3] = {
     render: function (data, type, row, meta) { .. row[2]... } }

Upvotes: 1

Gyrocode.com
Gyrocode.com

Reputation: 58880

Use columns and columns.data to specify array index for the data source. In this case, you would need to provide options for every column, including first one.

For example:

table = $('#main-table').DataTable({
    ajax: {"url": "..."},
    columns: [
    {
          data: null
          render: function (data, type, row, meta) {
             // ... skipped ...
          }
     },
     { data: 1 },
     { data: 2 },
     { data: 3 },
     // ... skipped ...
    ];
});

Alternatively, you could use combination of columnDefs.data and columnDefs.targets, but that is slightly more verbose.

Upvotes: 3

Related Questions