I,am designing cshtml pages using As per the instructions given here, https://github.com/Mobius1/Vanilla-DataTables
I have added CSS and JS files appropriately,
CSS
<link href="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">
JS
<script src="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>
I tried to initialize the table in my index page by calling below code in my cshtml index page
<script>
var table = new DataTable("table");
</script>
Also tried
<script>
var table = new DataTable("#datatable");
</script>
where table is my table class name and datatable is the id of the table. But nothing shows up. Please let me know if you require any additional details. I,am using .net core and bootstrap in MVC architecture.
Based on the provided answer, I ended up using simple datatables from referred in the same Github repo as a solution which is the latest iteration of vanilla datatables:
https://github.com/fiduswriter/Simple-DataTables
And initialised using below script at bottom of the cshtml page:
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest"></script>
<script>
// Simple Datatable
var mytable = document.querySelector('#datatable');
var dataTable = new simpleDatatables.DataTable(mytable,{
//Enter any additional config details required here if required. Else Leave Blank
});
</script>
The Vanilla-DataTables repo you linked to has several links with examples using their scripts.
The value used in the DataTable .ctor appears to be the class name of the HTML table(s) to bind Vanilla-DataTables.
So, in your example, if you use:
<script>
var table = new DataTable("table");
</script>
Then you need to have an HTML table with a css class named table:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Ext.</th>
<th>City</th>
<th data-type="date" data-format="YYYY/MM/DD">Start Date</th>
<th>Completion</th>
</tr>
</thead>
<tbody>
<tr><td>Unity Pugh</td><td>9958</td><td>Curicó</td><td>2005/02/11</td><td>37%</td></tr>
<tr><td>Theodore Duran</td><td>8971</td><td>Dhanbad</td><td>1999/04/07</td><td>97%</td></tr>
<tr><td>Kylie Bishop</td><td>3147</td><td>Norman</td><td>2005/09/08</td><td>63%</td></tr>
<tr><td>Alisa Horn</td><td>9853</td><td>Ucluelet</td><td>2007/01/11</td><td>39%</td></tr>
<tr><td>Zelenia Roman</td><td>7516</td><td>Redwater</td><td>2012/03/03</td><td>31%</td></tr>
</tbody>
</table>
Source: Vanilla-DataTable Demos > Default Setup