DT

HTML

<!DOCTYPE html>
<html>

  <head>
    <title></title>


    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.4/css/responsive.bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">

    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
    <script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>




  </head>

  <body>

    <table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
     ...

JavaScript

var dataSet = [{
     "DT_RowId": "row_1",
     "first_name": "Tiger",
     "last_name": "Nixon",
     "position": "System Architect",
     "email": "[email protected]",
     "office": "Edinburgh",
     "extn": "5421",
     "age": "61",
     "salary": "320800",
     "start_date": "2011-04-25"
   },
   {
     "DT_RowId": "row_2",
     "first_name": "Lion",
     "last_name": "Nixon",
     "position": "System Architect",
     "email": "[email protected]",
     "office": "Edinburgh",
     "extn": "5421",
     "age": "61",
     "salary": "320800",
     "start_date": "2011-04-25"
   },
   {
     "DT_RowId": "row_3",
     "first_name": "Alexander Krashinski",
     "last_name": "Krasinski",
     "position": "Chief Developer System Architect",
     "email": "[email protected]",
     "office": "Edinburgh",
     "extn": "5421",
     "age": "61",
     "salary": "320800",
     "start_date": "2011-04-25"
   },
 ];


 $(document).ready(function() {

   editor = new $.fn.dataTable.Editor({
     ajax: "../php/staff.php",
     table: "#example",
     fields: [{
       label: "First name:",
       name: "first_name"
     }, {
       label: "Last name:",
       name: "last_name"
     }, {
       label: "Position:",
       name: "position"
     }, {
       label: "Office:",
       name: "office"
     }, {
       label: "Extension:",
       name: "extn"
     }, {
       label: "Start date:",
       name: "start_date",
       type: "datetime"
     }, {
       label: "Salary:",
       name: "salary"
     }]
   });




   var table = $('#example').DataTable({

     dom: "Bfrtip",

     data: dataSet,
     columns: [{
         data: "first_name"
       },
       {
         data: "position"
       },
       {
         data: "office"
       },
       {
         data: "extn"
       },
       {
         data: "start_date"
       },
       {
         data: "salary",
         render: $.fn.dataTable.render.number(',', '.', 0, '$')
       }
     ],
     select: true,
    ...