Datatable.js initialisation of table

Question

I am a beginner at Javascript so please pardon me if i'm asking a really basic question. I'm currently trying to apply Datatables.js into my jsp code from an example I found on https://coderexample.com/?s=datatable&submit=Go since I need the datepicker.

However,the example uses php to load the data and for me, I want it to be loaded base on the data listed in the table below. Additionally, I would like filters to be set upon initialisation. Eg city to be set default as Tokyo and probably I would use a dropdown list to toggle between the options.

Could anyone provide some help on how should i do the initialisation instead?

<table id="employee-grid"  class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Employee name</th>
                    <th>Salary</th>
                    <th>Position</th>
                    <th>City</th>
                    <th>Extension</th>
                    <th>Joining date</th>
                    <th>Age</th>
                </tr>
            </thead>
            <thead>
                <tr>
                    <td><input type="text" id="0"  class="employee-search-input"></td>
                    <td><input type="text" id="1" class="employee-search-input"></td>
                    <td><input type="text" id="2" class="employee-search-input" ></td>
                    <td><input type="text" id="3" class="employee-search-input" ></td>
                    <td><input type="text" id="4" class="employee-search-input" ></td>
                    <td  valign="middle"><input  readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
                    <td><input type="text" id="6" class="employee-search-input" ></td>
                </tr>
            </thead>
       <tbody>
          <tr>
            <td>Airi Satou</td>
            <td>162700</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>5407</td>
            <td>2008-11-27</td>
            <td>33</td>
        </tr>
        <tr>
            <td>Angelica Ramos</td>
            <td>1200000</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>5797</td>
            <td>2009-10-08</td>
            <td>47</td>
        </tr>         
  </tbody>

JS code

 $(document).ready(function() {

var dataTable =  $('#employee-grid').DataTable( {
processing: true,
serverSide: true,
ajax: "employee-grid-data.php", // json datasource

//Thinking that I would need to change something here, but not sure what to 
  do exactly

 } );

$("#employee-grid_filter").css("display","none");  // hiding global search box

$('.employee-search-input').on( 'keyup click change', function () {
    var i =$(this).attr('id');  // getting column index
    var v =$(this).val();  // getting search input value
    dataTable.columns(i).search(v).draw();
} );

 $( ".datepicker" ).datepicker({
    dateFormat: "yy-mm-dd",
    showOn: "button",
    showAnim: 'slideDown',
    showButtonPanel: true ,
    autoSize: true,
    buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    closeText: "Clear"
});
$(document).on("click", ".ui-datepicker-close", function(){
    $('.datepicker').val("");
    dataTable.columns(5).search("").draw();
});
});

Thank you so much!

Answer 1

start it with this

var dataTable =  $('#employee-grid').DataTable({});

this by itself will init datatables for you and will format the data you already have in your table.

try with the html the way it is, but if still doesn't work, remove the second header with those custom options, im sure there is a better way to set that part up, but for now, to make datatables work, the init posted in this solution works

here is a link on how to add custom toolbar elements