Applying jQuery DataTable 1.10+ with ASP.Net MVC 5 Tutorial

jQuery DataTable is a jQuery plugin to show table of data.
Note jQuery DataTable had used old-style attribute names like "bProcessing" instead of new name "processing" for older version. Thus Google DataTable will get lots of results based on the old naming style.

Creating DataTable with Customized Columns

The Model part:

The Html part:

<table id="example">
    <thead>
      <tr><th>Sites</th></tr>
    </thead>
    <tbody>
      <tr><td>SitePoint</td></tr>
      <tr><td>Learnable</td></tr>
      <tr><td>Flippa</td></tr>
    </tbody>
</table>

The javascript part:

<script type="text/javascript" charset="utf-8">
    var myTable;
    $(document).ready(function() {
        myTable = $('#jobs-table').dataTable( {
            "destroy": true,
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "info": true,
            "paging": false,
            "searching": false,
            "scrollX": true,
            "ajax": {
                "url": "/DataController/GetDataForTable",
                "type": "GET",
                "data": { "date": startDate}
            },
            "columnDefs": [ {
                "targets": 0, /*column index counting from the left*/
                "searchable": false,
                "className": "dt-right", /* Right align text in the header and body */
                "render": function ( data, type, row ) {
                    return data +' ('+ row[3]+')';
                },
                { "visible": false,  "targets": [ 3 ] }
            }],
            "columns": [
                { "data": "StartDate" },
                { "data": "Players" },
                { "data": "TotalSession" },
            ]
        })
    });
</script>

Note the above javascript will set the data table to align right which defined in the columnDefs for the 1st column.

In addition, the first column will also display the 4th column combined through render function. And it hides the 4th column. The render function has 3 parameters, data, type, and row. The data refers the data for the cell, and also the type.

Serverside DataTable

Note above dataTable define contains serverSide as true, which means the data source will come from server side.  Actually, above code contains ajax parameter, which refers a MVC controller method named GetDataForTable, which returned json data to loading the data table.

    public class DataController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        
        public JsonResult GetDataForTable(string startDate)
        {
            try
            {
                if (startDate == null)
                {
                    return Json(null, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    MyDataModel model = (new MyDataModelService()).GetMyDataModel(startDate);
                    return Json(new {
                        draw = 1, 
                        recordsTotal = model.MyDataList.Count,
                        recordsFiltered = model.MyDataList.Count,
                        data = model.MyDataList }, JsonRequestBehavior.AllowGet);
                }
            }
            catch (Exception ex)
            {
                return Json(ex.Message, JsonRequestBehavior.AllowGet);
            }
        }
    }

Note the json data contained draw, recordsTotal, recordsFiltered, and data, which are needed for data table.

Reference:
http://www.codeproject.com/Tips/844403/jQuery-Datatables-For-Beginners
https://datatables.net/manual/styling/classes
https://datatables.net/manual/server-side
http://legacy.datatables.net/usage/columns
http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part
http://stackoverflow.com/questions/22737957/use-jquery-datatables-server-side-processing-with-mvc-serialize-criteria-form-a/22742742#22742742
https://www.echosteg.com/jquery-datatables-asp.net-mvc5-server-side