How do I get the column name for sorting from database instead use of datatable inbuilt asc/desc

How do I get the column name for sorting from database instead use of datatable inbuilt asc/desc

pavan.apavan.a Posts: 10Questions: 5Answers: 0

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

This question has an accepted answers - jump to answer

Answers

  • tangerinetangerine Posts: 3,350Questions: 37Answers: 394

    Link to test case:
    Debugger code (debug.datatables.net):
    Error messages shown:
    Description of problem:

    Those prompts are provided for a reason. Ignoring them is no way to get help.

  • pavan.apavan.a Posts: 10Questions: 5Answers: 0

    so how do I get column name while click on column head for desc or asc?

  • kthorngrenkthorngren Posts: 20,364Questions: 26Answers: 4,777

    Are you using server side processing (serverSide: true)? Or are you doing your own custom script for sorting?

    Kevin

  • pavan.apavan.a Posts: 10Questions: 5Answers: 0
    edited July 2020

    Hello @kthorngren , (serverSide: true) was a little bit helpful but I am trying to make a csutom sorting and pagination. I have tried 2 different approaches. on in comment and other is uncomment. I am posting my code here. Please help me with that.

    <script>
        $(document).ready(function () {
            BindComplexList();
        });
    
        function pageSizeCounter(number) {
            var PageNo = parseInt($('#PageNo').val());
            if (PageNo > 1 && number == 0) {
                PageNo--;
            }
            else if (PageNo >= 1 && number == 1) {
                PageNo++;
            }
            else {
                PageNo = 1
            }
            $('#PageNo').val(PageNo);
            BindComplexList(); 
        }
      
        function BindComplexList() {
            var cName = $("#searchcomplexname").val();
            var mName = $("#searchmanagername").val();
            var cType = $("#searchbytype").val();
            var regionCityList = $("#example-getting-started").val();
            var pageNo = $('#PageNo').val();
    
            var jsonData =
            {
                cName: cName,
                mName: mName,
                cType: cType,
                regionCityList: regionCityList,
                pageNo: pageNo,
                pageSize: 10
                //sortColumn: sortColumn,
                //sortOrder: sortOrder
            };
    
           
            $("#tblComplex").DataTable({
                "destroy": true,
                "serverSide": true,
                "ajax": {
                    "url": "/Complex/GetComplexList",
                    "type": "Post",
                    "datatype": "json",
                    "data": jsonData,
                    "dataSrc": "complexListData"
                },
                "columns": [
                    { "title": "Id", "data": "id", "orderable": true, "visible": false },
                    {
                        "title": "Name", "data": "name", "orderable": true, "visible": true,
                        "render": function (data, type, row) {
                            var urledit = '/edit-complex?id=' + row.id;
                            var editValue = '<a href=' + urledit + ' class="cursior-pointer btn btn-default" data-toggle="tooltip" title="Edit">' + row.name + '</a>';
                            return editValue;
                        }
                    },
                    { "title": "Address", "data": "address", "orderable": true, "visible": true },
                    { "title": "ComplexType", "data": "complexType", "orderable": true, "visible": true },
                    { "title": "ResidentManager", "data": "residentManager", "orderable": true, "visible": false },
                    { "title": "Phone", "data": "phone", "orderable": true, "visible": true },
                    { "title": "Location", "data": "location", "orderable": true, "visible": true },
                    { "title": "Active", "data": "active", "orderable": true, "visible": true }
                ],
                "order": [0, "asc"],
                "bAutoWidth": false,
                "bInfo": false,
                "paging": false,
                "searching": false
            });
         
    
            //$.ajax({
            //    url: '/Complex/GetComplexList',
            //    dataType: "json",
            //    type: "POST",
            //    async: true,
            //    data: jsonData,
            //    //dataType: "text",
            //    error: function () {
            //    },
            //    success: function (data) {
            //        complexlistdata = data.complexListData;
    
            //        if ($.fn.DataTable.isDataTable("#tblComplex")) {
            //            $('#tblComplex').DataTable().destroy();
            //        }
            //        $('#tblComplex').DataTable({
    
    
            //            data: complexlistdata,
            //            "bDestroy": true,
            //            //"dom": '<"top"fl>rt<"bottom"ip><"clear">',
            //            //"orderSequence": ["desc", "asc"],
            //            "order": [[0, 'asc']],
            //            "bAutoWidth": false,
            //            "searching": false,
            //            "bPaginate": false,
            //            "bInfo": false,
            //            serverSide: true,
            //            ajax: {
            //                url: '/Complex/GetComplexList',
            //                dataFilter: function (data) {
            //                    debugger
            //                    var json = jQuery.parseJSON(data);
            //                    json.recordsTotal = json.total;
            //                    json.recordsFiltered = json.total;
            //                    json.data = json.list;
    
            //                    return JSON.stringify(json); // return JSON string
            //                }
            //            },
            //            "columns": [
    
            //                { "title": "Id", "data": "id", "orderable": true, "visible": false },
            //                {
            //                    "title": "Name", "data": "name", "orderable": true, "visible": true,// "sType": "duration",
            //                    "render": function (data, type, row) {
            //                        var urledit = '/edit-complex?id=' + row.id;
            //                        var editValue = '<a href=' + urledit + ' class="cursior-pointer btn btn-default" data-toggle="tooltip" title="Edit">' + row.name + '</a>';
            //                        return editValue;
            //                    }
            //                },
            //                { "title": "Address", "data": "address", "orderable": true, "visible": true },
            //                { "title": "ComplexType", "data": "complexType", "orderable": true, "visible": true },
            //                { "title": "ResidentManager", "data": "residentManager", "orderable": true, "visible": false },
            //                { "title": "Phone", "data": "phone", "orderable": true, "visible": true },
            //                { "title": "Location", "data": "location", "orderable": true, "visible": true },
            //                { "title": "Active", "data": "active", "orderable": true, "visible": true }
            //            ],
            //            "initComplete": function () {
            //                var dataTable = $('#tblComplex').DataTable();
            //                $('[data-toggle="tooltip"]').tooltip();
            //                //$('#tblComplex thead').on('click', 'th', function () {
            //                //    debugger
            //                //    var dataTable = $('#tblComplex').DataTable();
            //                //    //get the initialization options
            //                //    var columns = dataTable.settings().init().columns;
            //                //    //get the index of the clicked cell
            //                //    var colIndex = dataTable.cell(this).index().column;
            //                //    alert('you clicked on the column with the name ' + columns[colIndex].name);
    
            //                //    //alert('Column title clicked on: ' + $(title).html());
            //                //});
    
            //            }
            //        })
            //    }
            //})
        }
    
    </script>
    

    Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

  • kthorngrenkthorngren Posts: 20,364Questions: 26Answers: 4,777
    Answer ✓

    Server side processing is a Datatable protocol for paging. The protocol is documented here. You don't want to use serverSide: true if your server script does't use this protocol. You can look at and use the Datatables example PHP script found here.

    Is this what you want to use or do you want to create your own?

    I am trying to make a csutom sorting and pagination. I have tried 2 different approaches. on in comment and other is uncomment. I am posting my code here. Please help me with that.

    If you have specific questions we will try to help. Likely you will need to post a link to your page or a running test case so we can interact with your code. Simply posting code and asking for help isn't going to yield much help.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • pavan.apavan.a Posts: 10Questions: 5Answers: 0

    Thanks @kthorngren . Refered serverSide : true related solutions and I found what I need.

This discussion has been closed.