How to customize the table in datatables?

Question

I have searched many links but I didn't get any solution to customize the table. Any small suggestion can be helpful.

Normally the data table we get is of the structure :

|  col1          | col2           | col3           |
|---------------------------------------------------
|   col1 row1    | col2 row1      | col3 row1      |
|---------------------------------------------------
|  col1 row2     | col2 row2      |  col3 row2     |
|---------------------------------------------------

Now I want the data table in the structure such as

|  col1          | col2           | col3           |
|---------------------------------------------------
|                | col2 row11      | col3 row11    |
|   row1         -----------------------------------
|                | col2 row2 1     |  col3 row12   |
|---------------------------------------------------

Answer 1

Try this example,

 $(document).ready( function () { var data = [ ['subgroupN', 'Group1', 'sub-subgroupN', 'ElementN', '2Element N'], ['subgroup1', 'Group2', 'sub-subgroup1', 'Element1', '2Element 1'], ['subgroup2', 'Group2', 'sub-subgroup1', 'Element1', '2Element 1'], ['subgroup2', 'Group2', 'sub-subgroup1', 'Element2', '2Element 2'], ['subgroup2', 'Group2', 'sub-subgroup2', 'Element3', '2Element 2'], ['subgroup2', 'Group2', 'sub-subgroup2', 'Element4', '2Element 4'], ['subgroup2', 'Group2', 'sub-subgroup2', 'Element2', '2Element 2'], ['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2Element 1'], ['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2Element 1'], ['subgroup2', 'Group2', 'sub-subgroup2', 'Element1', '2Element 1'], ['subgroup4', 'Group2', 'sub-subgroup2', 'Element1', '2Element 1'], ['subgroup4', 'Group2', 'sub-subgroup3', 'Element10', '2Element 17'], ['subgroup4', 'Group2', 'sub-subgroup3', 'Element231', '2Element 211'], ]; var table = $('#example').DataTable({ columns: [ { title: 'First group', }, { name: 'second', title: 'Second group [order first]', }, { title: 'Third group', }, { title: 'Forth ungrouped', }, { title: 'Fifth ungrouped', }, ], data: data, rowsGroup: [// Always the array (!) of the column-selectors in specified order to which rows grouping is applied // (column-selector could be any of specified in https://datatables.net/reference/type/column-selector) 'second:name', 0, 2 ], pageLength: '20', }); } );

 body { font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff; } div.container { min-width: 980px; margin: 0 auto; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script> <script src="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js"></script> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> </head> <body> <div class="container"> <table id="example" class="display" width="100%"> </table> </div> </body> </html>

Hope this will helps you.

For more example visit,

How to add Rowspan in JQuery datatables

How to customize the table in datatables?

Question

1 answers

solution1
1 ACCPTED 2018-05-22 04:08:26

How to customize the table in datatables?

Question

1 answers

solution1 1 ACCPTED 2018-05-22 04:08:26

solution1
1 ACCPTED 2018-05-22 04:08:26