why DataTables is very slow?

why DataTables is very slow?

majidramezanymajidramezany Posts: 2Questions: 1Answers: 0
edited August 2018 in Free community support

Dear guys
I created a sample with asp.net web form for DataTables but it is very slow
for example for processing server side (page size is 10 rows) it takes 5 seconds(total records is 56 rows!)
when I change page size to 50 records it takes 23 seconds !
I have used jqgrid before and it was very fast for example for 30 records in page took less than 2 seconds.

js
<script type="text/javascript">
    $(document).ready( function () {
        var t = $('#table_id').DataTable({
            responsive:true,
            processing: true,
            serverSide: true,
            autoWidth:false,
            fixedHeader:{
                header: true,
                footer: true
            },
            ajax:{
                method:'POST',
                url:'/DataGridHandler.aspx/GetDataTableInfo',
                contentType:'application/json;charset=utf-8',
                dataType:'json',
                data: function (d) {
                d.extra_search=$('#search').val();
                return JSON.stringify({ parameters: d });
                },
                dataSrc:function (json){
                    json.draw = json.d.draw;
                    json.recordsTotal = json.d.recordsTotal;    
                    json.recordsFiltered = json.d.recordsFiltered;    
                    json.data = json.d.data;    
                    var return_data = json;    
                    return return_data.data;    
                }
            },
                columns:[
                    {data:null,'name':'RowNumber','title':'RoN','width':'1%'},
                    { data:'UserName','name':'UserName','title':'UName','width':'10%' },
                    { data:'FirstName','name':'FirstName','title':'Name','width':'10%' },
                    { data:'LastName','name':'LastName','title':'Family','width':'10%' },
                    { data:'Mobile','name':'Mobile','title':'CellPhone','width':'10%' },
                    { data:'Credit','name':'Credit','title':'Credit','width':'10%' },
                    { data:'CreateDate','name':'CreateDate','title':'CreateDate','width':'10%' },
                    { data:'Email','name':'Email','title':'Email','width':'10%' }
                ],
                columnDefs:[
                    {searchable: false,orderable: false,targets: 0,className:'dt-center'},
                    {targets:1,className:'dt-center'},
                    {targets:2,className:'dt-center'},
                    {targets:3,className:'dt-center'},
                    {targets:4,className:'dt-center'},
                    {targets:5,className:'dt-center'},
                    {targets:6,className:'dt-center'},
                    {targets:7,className:'dt-center'}
                ],
                order: [[1, 'asc']]
            });

            t.on( 'draw.dt',function(){
                var PageInfo = t.page.info();
                    t.column(0,{page:'current'}).nodes().each(function(cell,i){
                        cell.innerHTML = i + 1 + PageInfo.start;
                    });
            });
                                
            $('#table_id_filter input').unbind();
            $('#table_id_filter input').on('keypress', function(e){
                if(e.keyCode == 13){
                    t.search(this.value).draw();
                    e.preventDefault();
                }
            });
});
</script>
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static DataTableResultSet GetDataTableInfo(object parameters)
{
    var req = DataTableParameters.Get(parameters);
    var lstUser = new List<User>{
        new Common.User
        {
            UserName = "akam",
            FirstName = "majid",
            LastName = "ramezany",
            Email = "majid.ramezany@gmail.com",
            Mobile = "989135300037",
            Credit = 0,
            CreateDate = DateTime.Today,
            Address = "Iran",
            NationalCode = "123",
            CompanyAddress = "iran"
        }
    }
    //add other object to lstUser
    var resultSet = new DataTableResultSet
    {
        draw = req.Draw,
        recordsTotal = lstUser.Count,
        recordsFiltered = lstUser.Count
    };
    
    var lstpage = lstUser.OrderBy(u=>u.UserName).Skip(req.Start).Take(req.Length).ToList();
    
    resultSet.data = lstpage;
    return resultSet;
}

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,115Questions: 1Answers: 2,583
    Answer ✓

    Hi @majidramezany ,

    When you say, with serverSide it takes "X seconds for Y records" - you need to break down what that means. For example, if it takes 23 seconds as you reported, is that 22 seconds on the server side? Or does the server respond immediately, and it takes 22 seconds on the client? That performance profile is really important to understand where the problem lies.

    Cheers,

    Colin

  • majidramezanymajidramezany Posts: 2Questions: 1Answers: 0

    Hi
    You are right.I found my problem
    The problem was in server side.
    Thanks a lot any way

This discussion has been closed.