why DataTables is very slow?

majidramezany

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;
}

colin

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

majidramezany

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