lundi 13 février 2017

How to Sort Data's in DataTable?

I am currently working with a simple project on my own using asp.net mvc3 and bootstrap. I have this code below working perfectly. But my problem is in when displaying in my Data Table. As you can see in the code I order it by the PositionId and the Result in Controller is fine and but the problem is in data table.

ID's

Pres - 1

V. P - 2

Sec - 3

Code

public JsonResult LoadTableTest()
    {

        var Data = new List<object>();

        Data = (from a in db.testVotings
               orderby a.PositionID
                select new
                {
                    PosId = a.PositionID,
                    testID = a.testID,
                    Fullname = a.Fullname,
                    Position = a.Position,
                    party = a.party
                }).ToList<object>();

        return Json(new
        {
            data = Data
        }, JsonRequestBehavior.AllowGet);

    }

JS

var dataTablestest = $("#tbltest").DataTable({
    responsive: true,
    processing: true,
    info: true,
    search: true,
    stateSave: true,
    order: [[1, "asc"]],// [2, "asc"]],
    lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]],
    ajax: { "url": "/Voting/LoadTableTest" },
    columns:
    [
    { data: "PosId", title: "", orderable: true ,visible: false, searchable: false },
         { data: "testID", title: "",orderable: false, visible: false, searchable: false },
        { data: "Fullname", title: "FullName",orderable: false, sClass: "alignRight" },
        { data: "Position", title: "Position",orderable: false, sClass: "alignRight" },
        { data: "party", title: "Party",orderable: false, sClass: "alignRight" },
        { data: "ActionMenu", title: "Click to vote", searchable: false, orderable: false, sClass: "alignCenter",
            "mRender": function (data) {
                return '<center><label><input class="checkId" type="checkbox" /></label></center>';
            }
        }
    ]
});

HTML

 < table class="table table-striped table-bordered table-hover table-responsive nowrap" role="grid" style="width: 100%;" id="tbltest">
 < /table>

enter image description here enter image description here

Aucun commentaire:

Enregistrer un commentaire