how to shift columns mappings (because of inserted “row header column”) without redefining columns?

how to shift columns mappings (because of inserted “row header column”) without redefining columns?

RPokrovskijRPokrovskij Posts: 8Questions: 2Answers: 0

I have added "row header column" to my table:

HTML:

<table id="main-table" class="table table-hover table-striped mainTable w-100">
    <thead>
        <tr>
            <th class="rowHeader 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.

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

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 (data column X to table column X+1 ) in one line?

Answers

  • kthorngrenkthorngren Posts: 21,117Questions: 26Answers: 4,916

    Instead of columnDefs I would use columns.data and reference the position in the array, for example:

            "columns": [
                {data: '', defaultContent: ''},
                {data: 0},
                {data: 1}
            ],
    

    Not sure what you want in column 0 but you can change the defaultContent to display buttons or whatever. Here is an example:
    http://live.datatables.net/ketiboru/1/edit

    Someone may post a better way of doing this.

    Kevin

  • RPokrovskijRPokrovskij Posts: 8Questions: 2Answers: 0

    I want to remove column 0 from mappings (and going to render it by my own code).

    {data: 0},
    {data: 1}
    // ...
    

    this is still too verbose . But I could to add the same in javascript loop - so thank you for the idea.

    P.S. Still think that there should be the way to remove "row header" from mappings "in one config options". Row headers is common practice, isn't it?

  • RPokrovskijRPokrovskij Posts: 8Questions: 2Answers: 0
    edited March 2019

    So far the best 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]... } }
    

    But still would be nice just to say: "first table column is row header, exclude it from mapping" with one configuration option.

This discussion has been closed.