CODEWITHSUNDEEP
javascriptarraysajaxdatatables
Aipo
Aipo

Reputation: 1985

How to display table with 2 headers using DataTables plugin?

I want to display similar table like W3.

Code:

  $('table_1').DataTable({
        ajax:'ajax_table_1.php',
        paging:false,
        
    });
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_1">
  <caption>Delivery slots:</caption>
  <tr>
    <td></td>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
  </tr>
  <tr>
    <th scope="row">Morning</th>
    <td>Closed</td>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">Evening</th>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
</table>
HTML shows my goal which I want to achieve.

How to set up my data array that it should look like to implemented table with 2 headers to fill all table data with ajax call?

Upvotes: 0

Views: 36

Answers (1)

Margon
Margon

Reputation: 511

You can simply render your columns in order to achieve that check here for the docs

a short snippet to show what you can do is: 

"columnDefs": [
 {
    "createdCell":  function (td, cellData, rowData, row, col) {
       $(td).attr("scope", "row"); 
    }
    "targets": 0 //this is your column number, just change it if you need another column
 }

]

Upvotes: 1

Related Questions