Mark Tabor

Mark Tabor

  • 586
  • 2k
  • 464.4k

How to add Serial/Index # column at the start of Jquery Datatable

Nov 12 2020 1:16 AM
Kindly checkout my complete view and add the required code I have tried many from Stack overflow but none of them work for me below is my code.
  1. @{  
  2. ViewBag.Title = "Question List";  
  3. Layout = "~/Views/Login/Dashboard2.cshtml";  
  4. }  
  5. <hr />  
  6. <h2>Questions List</h2>  
  7. <hr />  
  8. <p>  
  9. @Html.ActionLink("Create New""Create"nullnew { @class = "btn btn-primary" })  
  10. </p>  
  11. <br /><br />  
  12. <table id="tblQuetions">  
  13. <thead>  
  14. <tr>  
  15. <th>  
  16. Question Description  
  17. </th>  
  18. <th>  
  19. Type  
  20. </th>  
  21. <th>  
  22. Status  
  23. </th>  
  24. <th>  
  25. Start Date  
  26. </th>  
  27. <th>  
  28. Created By  
  29. </th>  
  30. <th>Edit</th>  
  31. <th>Delete</th>  
  32. </tr>  
  33. </thead>  
  34. </table>  
  35. <link href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />  
  36. @*<link rel="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" type="text/css" />*@  
  37. @section scripts  
  38. {  
  39. <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>  
  40. <script>  
  41. $(document).ready(function () {  
  42. $("#tblQuetions").DataTable({  
  43. rowReorder: true,  
  44. "ajax": {  
  45. "url""/Questions/GetList",  
  46. "type""POST",  
  47. "processing"true,  
  48. "serverSide"true,  
  49. "datetype""json"  
  50. },  
  51. "columns": [  
  52. // { "data": "Semester_Id", "name": "Semester_Id", "autoWidth": true },  
  53. "data""QuestionText" },  
  54. "data""Evaluation_Type" },  
  55. "data""Status" },  
  56. {  
  57. "data""Date_Created"'render'function (jsonDate) {  
  58. var date = new Date(parseInt(jsonDate.substr(6)));  
  59. var month = date.getMonth() + 1;  
  60. return month + "/" + date.getDate() + "/" + date.getFullYear();  
  61. } },  
  62. "data""Added_By" },  
  63. {  
  64. "render"function (data, type, full, meta) { return '<a class="btn btn-info" href="/Questions/Edit/' + full.Id + '">Edit</a>'; }  
  65. },  
  66. {  
  67. "render"function (data, type, full, meta) { return '<a class="btn btn-danger" href="/Questions/Delete/' + full.Id + '">Delete</a>'; }  
  68. },  
  69. ]  
  70. });  
  71. });  
  72. function DeleteData(Id) {  
  73. if (confirm("Are you sure you want to delete ...?")) {  
  74. Delete(Id);  
  75. }  
  76. else {  
  77. return false;  
  78. }  
  79. }  
  80. function Delete(Id) {  
  81. var url = '@Url.Content("~/")' + "Demo/DeleteCustomer";  
  82. $.post(url, { ID: Id }, function (data) {  
  83. if (data == "Deleted") {  
  84. alert("Delete Customer !");  
  85. oTable = $('#tblQuetions').DataTable();  
  86. oTable.draw();  
  87. }  
  88. else {  
  89. alert("Something Went Wrong!");  
  90. }  
  91. });  
  92. }  
  93. </script>  
  94. }  
  95. @Scripts.Render("~/bundles/jquery")  
  96. <script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>  
  97. <script type="text/javascript">  
  98. tinymce.init({ selector: 'textarea', width: 500 });  
  99. </script>  

Answers (7)