CODEWITHSUNDEEP
javascriptasp.net-core.net-coredatatablesasp.net-core-mvc
ahp
ahp

Reputation: 397

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

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.

Edit

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>

Upvotes: 0

Views: 848

Answers (1)

Metro Smurf
Metro Smurf

Reputation: 38335

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

Upvotes: 2

Related Questions