Clash Royale CLAN TAG

Datatable.js initialisation of table

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. E.g 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!

1 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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.