Section 6 - Loading Datatables

jacksonsophat · Sep 23, 2021 · 13fe8db · 13fe8db
1 parent e7a74fe
commit 13fe8db
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/BulkyBookWeb/Areas/Admin/Views/Product/Index.cshtml b/BulkyBookWeb/Areas/Admin/Views/Product/Index.cshtml
@@ -11,16 +11,20 @@
 	</div>
     <br /><br />
 
-<table class="table table-bordered table-striped" style="width:100%">
+<table  id="tblData"  class="table table-bordered table-striped" style="width:100%">
     <thead>
         <tr>
             <th>Title</th>
             <th>ISBN</th>
             <th>Price</th>
             <th>Author</th>
-            <th>Category</th>
-            <th></th>
+            @*<th>Category</th>*@
+            @*<th></th>*@
 		</tr>
 	</thead>
 </table>
-</div>
+</div>
+
+@section Scripts{
+    <script src="~/js/product.js"></script>
+}
diff --git a/BulkyBookWeb/wwwroot/js/product.js b/BulkyBookWeb/wwwroot/js/product.js
@@ -0,0 +1,19 @@
+var dataTable;
+
+$(document).ready(function () {
+    loadDataTable();
+});
+
+function loadDataTable() {
+    dataTable = $('#tblData').DataTable({
+        "ajax": {
+            "url":"/Admin/Product/GetAll"
+        },
+        "columns": [
+            { "data": "title", "width": "15%" },
+            { "data": "isbn", "width": "15%" },
+            { "data": "price", "width": "15%" },
+            { "data": "author", "width": "15%" },
+        ]
+    });
+}