How to Initialize or call Vanilla Datatables in .NET Core MVC-CodePudding

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">

<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.

CodePudding user response：

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 >
    <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

CodePudding user response：

I used simple data tables from referred in the same Github repo:

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>