Display tabular data with jQuery Datatables plugin

Question

I have this list of results which I display with the jQuery Datatables plugin.

This is the Result class and list of results being returned in the JSON format:

public class Result
{
            public int articleid { get; set; }
            public string Name { get; set; }
            public string Position { get; set; }
            public string Office { get; set; }
            public string Extn { get; set; }
            public string Startdate { get; set; }
            public string Salary { get; set; }
}

        [WebMethod]
        [ScriptMethod(UseHttpGet = true)]
        public static string GetJsonEmps()
        {
            List<Result> lsts = new List<Result>();
            for (int i = 1; i <= 10; i++)
            {
                lsts.Add(new Result() { articleid = i, Name = "AA" + i, Position = "home" + i, Office = "aas" + i, Extn = "extn" + i, Startdate = "date" + i, Salary = "sal" + i });
            }
            JavaScriptSerializer js = new JavaScriptSerializer();
            string json = js.Serialize(new { data = lsts });
            if (!string.IsNullOrEmpty(json))
            {
                return json;
            }
            return "";
        }

Client-side code

The code loads the datatable and adds a checkbox, where on save button click, I collect checked IDs:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<script src="Scripts/jquery-1.11.1.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" type="text/javascript"></script>

$(document).ready(function () {    

            $("#btnSave").click(function (e) {              
                var table = $('#example').DataTable();
                e.preventDefault();
                $(".chkcls").each(function () {
                    if (this.checked) {                     
                        var $row = $(this).closest('tr');
                        // Get row data
                        var data = table.row($row).data();
                        // Get row ID
                        var rowId = data[0];
                        alert("row id is " + rowId);
                    }
                });
            });    

            createtable();    
        });

        var datatable;
        function createtable() {
            $.ajax({
                type: "GET",
                url: "Jquery-datatable.aspx/GetJsonEmps",
                data: "{}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (response) { drawtable(response); },
                error: function (xhr, ajaxOptions, thrownError) { alert(xhr.responseText); }

            });
        }


        function drawtable(result) {
            var result = $.parseJSON(result.d);
            var arrayReturn = [];
            for (var i = 0, len = result.data.length; i < len; i++) {
                var res = result.data[i];
                arrayReturn.push([res.articleid, res.Name, res.Position, res.Office, res.Extn, res.Startdate, res.Salary]);
            }       

            drawTable(arrayReturn);          
        }



 function drawTable(arr) {
            var table = $('#example').DataTable({
                iDisplayLength: 5,
                responsive: true,
                processing: true,
                "aaData": arr,
                columns: [
            { title: "Select" },
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn" },
            { title: "Startdate" },
            { title: "Salary" }
           ],
                "aoColumnDefs": [{
                    "aTargets": [0],                        
                    "mRender": function (data, type, full) {                           
                        if (isarticlesubmittable(data)) {
                            return '<input type=\"checkbox\" class=\"chkcls\" disabled="disabled" checked value="' + data + '">';
                        } else {
                            return '<input type=\"checkbox\" class=\"chkcls\" value="' + data + '">';
                        }
                    }
                }]
            });
        }
        function isarticlesubmittable(status) {
            return status == 1 || status == 3;
        }

Output:

I would like to know if any improvements can be made.

Answer 1

A few thoughts on the client-side code :

Fixes

• the save handler appears not to do any saving.
• $.ajax() dataType option is dataType: "json", therefore the result is parsed JOSN, which is passed to drawtable(), which does var result = $.parseJSON(result.d) implying that the parsed JSON object delivered by $.ajax contains further JSON. The server-side code appears to indicate that a one-shot json-parse will suffice. I can see no evidence of a .d property.
• $.ajax() option data: "{}" - seems wrong.

Tidies

• createtable(), drawTable() drawtable() and isarticlesubmittable() appear to be in the global namespace and could be moved inside the $(document).ready(function () {...}) structure.
• drawtable() and drawTable() - very confusing. Rename one or other or simply roll drawTable() into drawtable().
• Is isarticlesubmittable() really necessary? It's one line and only called once.
• var datatable is not used. If it was, then you should be able to avoid var table = $('#example').DataTable(); in the save handler.
• In the save handler, select with $(".chkcls:checked") and avoid the test if (this.checked) {...}.
• $.ajax() success option will simplify to success: drawtable,.
• Use result.data.map(...) to compose arrayReturn.
• Unecessary escape characters in 'mRender': function() {...}.
• Avoid unnecessary assignments.

Doing the tidyies, not the fixes, I get :

$(document).ready(function () {
    var datatable;
    $("#btnSave").click(function (e) {
        e.preventDefault();
        if(datatable) {
            $(".chkcls:checked").each(function () {
                alert("row id is " + datatable.row($(this).closest('tr')).data()[0]);
            });
        }
    });
    $.ajax({
        'type': 'GET',
        'url': 'Jquery-datatable.aspx/GetJsonEmps',
        'data': '{}',
        'dataType': 'json',
        'contentType': 'application/json; charset=utf-8',
        'success': drawtable,
        'error': function (xhr, ajaxOptions, thrownError) { alert(xhr.responseText); }
    });
    function drawtable(result) {
        var result = $.parseJSON(result.d);
        datatable = $('#example').DataTable({
            'iDisplayLength': 5,
            'responsive': true,
            'processing': true,
            'aaData': result.data.map(function(res) {
                return [res.articleid, res.Name, res.Position, res.Office, res.Extn, res.Startdate, res.Salary];
            }),
            'columns': [
                { 'title': 'Select' },
                { 'title': 'Name' },
                { 'title': 'Position' },
                { 'title': 'Office' },
                { 'title': 'Extn' },
                { 'title': 'Startdate' },
                { 'title': 'Salary' }
            ],
            'aoColumnDefs': [{
                'aTargets': [0],
                'mRender': function (data, type, full) {
                    if (data == 1 || data == 3) {
                        return '<input type="checkbox" class="chkcls" disabled="disabled" checked value="' + data + '">';
                    } else {
                        return '<input type="checkbox" class="chkcls" value="' + data + '">';
                    }
                }
            }]
        });
    }
});