responsive datatable

by Benahmed Taoufiq

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.0/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="//cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<table id="table" class="display responsive" style="width:100%">
  <thead>
    <tr>
      <th class="dtr-control"></th>
      <th class="text-center">Column 1</th>
      <th class="text-center">Column 2</th>
      <th class="desktop tablet text-center">Column 3</th>
      <th class="desktop tablet text-center">Column 4</th>
      <th class='text-center'>Action</th>
    </tr>
  </thead>
  <tfoot>
    <td class="text-center"></td>
    <td class="text-center fw-bold">Column 1</td>
    <td class="text-center fw-bold">Column 2</td>
    <td class="text-center fw-bold">Column 3</td>
    <td class="text-center fw-bold">Column 4</td>
    <td class="text-center fw-bold">Action</td>
  </tfoot>
</table>

CSS

table td{text-align:center}
table .dtr-title{font-weight:bold}
.edit{position:relative}
.edit:before{
	content:"Cancel";
	position:absolute;
	top:0;left:0;width:100%;height:100%;padding:2% 0;margin:0;background-color:#999db5;color:white;font-size:15px;font-weight:bold;
	line-height:30px;vertical-align:middle;outline:none
}

JavaScript

let data = [];
for (let i = 1; i < 200; i++) {
  data.push({
    "DT_RowId": i,
    "col1": i,
    "col2": (i + 1),
    "col3": (i + 2),
    "col4": (i + 3)
  });
  i = i + 3;
}
var table = $("#table").DataTable({
  pageLength: 10,
  order: [
    [1, 'asc']
  ],
  responsive: {
    details: {
      renderer: function(api, rowIdx, columns) {
        var data = $.map(columns, function(col, i) {
          let columnName = api.context[0]
            .aoColumns[col.columnIndex].name;

          if (col.hidden) {
            let tr = $('<tr data-dt-row="' +
                col.rowIndex + '" data-dt-column="' +
                col.columnIndex + '">' +
                '<td class="dtr-title">' + col.title + ':' +
                '</td>' +
                '<td class="dtr-data">' + col.data +
                '</td></tr>')
              .each(function() {
                if ($('#' + api.context[0].sTableId +
                    " tbody tr[id]").eq(rowIdx[0])
                  .find("td").eq(i + 1)
                  .find('.form-control.search-autoColmplete').length) {
                  $(this).find('.dtr-data')
                    .html(function() {
                      return $('#' + api.context[0].sTableId +
                          " tbody tr[id]")
                        .eq(rowIdx[0]).find("td")
                        .eq(i + 1)
                        .find('.form-control.search-autoColmplete')
                        .appendTo(this);
                    });
                }
              });
            return tr;
          }
        });
        return data.length ? $('<table class="dtr-details" />').append(data) : false;
      }
    }
  },
  data: data,
  columns: [{
      data: null,
      searchable: false,
      orderable: false,
      defaultContent: ""
    },
    {
      name: "col1",
      data: "col1"
    },
    {
      name: "col2",
      data: "col2"
    },
    {
      name: "col3",
      data: "col3"
    },
    {
      name: "col4",
      data: "col4"
 ...