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

Mark Tabor

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.

@{
ViewBag.Title = "Question List";
Layout = "~/Views/Login/Dashboard2.cshtml";
}
Questions List
@Html.ActionLink("Create New", "Create", null, new { @class = "btn btn-primary" })
"tblQuetions">
Question Description
Type
Status
Start Date
Created By
Edit
Delete
"//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
@*"//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" type="text/css" />*@
@section scripts
{
"//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
}
@Scripts.Render("~/bundles/jquery")
"text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js">
"text/javascript">
tinymce.init({ selector: 'textarea', width: 500 });

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
Just copy paste and check its working or not?
$(document).ready(function () {
$("#tblQuetions").DataTable({
rowReorder: true,
"ajax": {
"url": "/Questions/GetList",
"type": "POST",
"processing": true,
"serverSide": true,
"datetype": "json"
},
"columns": [
{
     "data": null, "render": function (data, type, full, meta) {
         return meta.row + 1;
}
},

{ "data": "QuestionText" },
{ "data": "Evaluation_Type" },
{ "data": "Status" },
{
"data": "Date_Created", 'render': function (jsonDate) {
var date = new Date(parseInt(jsonDate.substr(6)));
var month = date.getMonth() + 1;
return month + "/" + date.getDate() + "/" + date.getFullYear();
} },
{ "data": "Added_By" },
{
"render": function (data, type, full, meta) { return ' + full.Id + '">Edit'; }
},
{
"render": function (data, type, full, meta) { return ' + full.Id + '">Delete'; }
},
]
});
});
Mark Tabor5y ago
check now even it did not load my data check attached screenshot
Mark Tabor5y ago
what should i replace with what?
Sachin Singh5y ago
Hii mark
Its like below (both does same thing)
columns: [
    /*other columns omitted for example*/
    {
        "data": null, //data is null since we want to access ALL data
                      //for the sake of our calculation below
        "render": function(data,type,row) { return row.index()}
    }

],
Mark Tabor5y ago
i checked the console it says t is not defined
Mark Tabor5y ago
sachin it shows empty rows
Sachin Singh5y ago
If you are not sending Id (Index column) from Action , then generate it in the DataTable itself like below
"tblQuetions">


  //  added a blank th

Question Description


Type


Status


Start Date


Created By

Edit
Delete




var t=$("#tblQuetions").DataTable({
rowReorder: true,
"ajax": {
"url": "/Questions/GetList",
"type": "POST",
"processing": true,
"serverSide": true,
"datetype": "json"
},
"columns": [
// { "data": "Semester_Id", "name": "Semester_Id", "autoWidth": true },
{ "data": "QuestionText" },
{ "data": "Evaluation_Type" },
{ "data": "Status" },
{
"data": "Date_Created", 'render': function (jsonDate) {
var date = new Date(parseInt(jsonDate.substr(6)));
var month = date.getMonth() + 1;
return month + "/" + date.getDate() + "/" + date.getFullYear();
} },
{ "data": "Added_By" },
{
"render": function (data, type, full, meta) { return ' + full.Id + '">Edit'; }
},
{
"render": function (data, type, full, meta) { return ' + full.Id + '">Delete'; }
},
] ,
        "order": [[ 1, 'asc' ]]
    } );



t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
});

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

Questions List