jquery datatable vs jqGrid grouping comparison (v3)

Revision 3 of this benchmark created on

Description

performance test between datatable and jqGrid in terms of building grouped tables.

Preparation HTML

<script src="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery.min.js"></script>
<script src="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery-ui.js"></script>
        
<script src="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery.dataTables.min.js"></script>
<script src="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery.dataTables.rowGrouping.js"></script>


<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>        
        <script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
        

<link rel="stylesheet" type="text/css" href="http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" href="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/css/demo_page.css"/>
        <link rel="stylesheet" type="text/css" href="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/css/demo_table.css" />
        
        
        <link rel="stylesheet" type="text/css" media="screen" href="http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css" />

<script>

var mydata1 = [
                ["1","2010-05-24","test","note","300.00","10.00","2111.00"] ,
                ["2","2010-05-25","test2","note2","300.00","20.00","320.00"],
                ["3","2007-09-01","test3","note3","300.00","30.00","430.00"],
                ["4","2007-10-04","test","note","300.00","10.00","210.00"],
                ["5","2007-10-05","test2","note2","300.00","20.00","320.00"],
                ["6","2007-09-06","test3","note3","300.00","30.00","430.00"],
                ["7","2007-10-04","test","note","300.00","10.00","210.00"],
                ["8","2007-10-03","test2","note2","300.00","21.00","320.00"],
                ["9","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["10","2007-09-02","test3","note3","400.00","30.00","430.00"],
                ["11","2007-10-01","test","note","200.00","10.00","210.00"],
                ["12","2007-10-02","test2","note2","300.00","20.00","320.00"],
                ["13","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["14","2007-10-04","test","note","200.00","10.00","210.00"],
                ["15","2007-10-05","test2","note2","300.00","20.00","320.00"],
                ["16","2007-09-06","test3","note3","400.00","30.00","430.00"],
                ["17","2007-10-04","test","note","200.00","10.00","210.00"],
                ["18","2007-10-03","test2","note2","300.00","20.00","320.00"],
                ["19","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["20","2007-09-02","test3","note3","400.00","30.00","430.00"],
                ["21","2007-10-01","test","note","200.00","10.00","210.00"],
                ["22","2007-10-02","test2","note2","300.00","20.00","320.00"],
                ["23","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["24","2007-10-04","test","note","200.00","10.00","210.00"],
                ["25","2007-10-05","test2","note2","300.00","20.00","320.00"],
                ["26","2007-09-06","test3","note3","400.00","30.00","430.00"],
                ["27","2007-10-04","test","note","200.00","10.00","210.00"],
                ["28","2007-10-03","test2","note2","300.00","20.00","320.00"],
                ["29","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["30","2007-09-02","test3","note3","410.00","30.00","440.00"],
                ["1","2010-05-24","test","note","300.00","10.00","2111.00"] ,
                ["2","2010-05-25","test2","note2","300.00","20.00","320.00"],
                ["3","2007-09-01","test3","note3","300.00","30.00","430.00"],
                ["4","2007-10-04","test","note","300.00","10.00","210.00"],
                ["5","2007-10-05","test2","note2","300.00","20.00","320.00"],
                ["6","2007-09-06","test3","note3","300.00","30.00","430.00"],
                ["7","2007-10-04","test","note","300.00","10.00","210.00"],
                ["8","2007-10-03","test2","note2","300.00","21.00","320.00"],
                ["9","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["10","2007-09-02","test3","note3","400.00","30.00","430.00"],
                ["11","2007-10-01","test","note","200.00","10.00","210.00"],
                ["12","2007-10-02","test2","note2","300.00","20.00","320.00"],
                ["13","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["14","2007-10-04","test","note","200.00","10.00","210.00"],
                ["15","2007-10-05","test2","note2","300.00","20.00","320.00"],
                ["16","2007-09-06","test3","note3","400.00","30.00","430.00"],
                ["17","2007-10-04","test","note","200.00","10.00","210.00"],
                ["18","2007-10-03","test2","note2","300.00","20.00","320.00"],
                ["19","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["20","2007-09-02","test3","note3","400.00","30.00","430.00"],
                ["21","2007-10-01","test","note","200.00","10.00","210.00"],
                ["22","2007-10-02","test2","note2","300.00","20.00","320.00"],
                ["23","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["24","2007-10-04","test","note","200.00","10.00","210.00"],
                ["25","2007-10-05","test2","note2","300.00","20.00","320.00"],
                ["26","2007-09-06","test3","note3","400.00","30.00","430.00"],
                ["27","2007-10-04","test","note","200.00","10.00","210.00"],
                ["28","2007-10-03","test2","note2","300.00","20.00","320.00"],
                ["29","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["30","2007-09-02","test3","note3","410.00","30.00","440.00"],
                ["1","2010-05-24","test","note","300.00","10.00","2111.00"] ,
                ["2","2010-05-25","test2","note2","300.00","20.00","320.00"],
                ["3","2007-09-01","test3","note3","300.00","30.00","430.00"],
                ["4","2007-10-04","test","note","300.00","10.00","210.00"],
                ["5","2007-10-05","test2","note2","300.00","20.00","320.00"],
                ["6","2007-09-06","test3","note3","300.00","30.00","430.00"],
                ["7","2007-10-04","test","note","300.00","10.00","210.00"],
                ["8","2007-10-03","test2","note2","300.00","21.00","320.00"],
                ["9","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["10","2007-09-02","test3","note3","400.00","30.00","430.00"],
                ["11","2007-10-01","test","note","200.00","10.00","210.00"],
                ["12","2007-10-02","test2","note2","300.00","20.00","320.00"],
                ["13","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["14","2007-10-04","test","note","200.00","10.00","210.00"],
                ["15","2007-10-05","test2","note2","300.00","20.00","320.00"],
                ["16","2007-09-06","test3","note3","400.00","30.00","430.00"],
                ["17","2007-10-04","test","note","200.00","10.00","210.00"],
                ["18","2007-10-03","test2","note2","300.00","20.00","320.00"],
                ["19","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["20","2007-09-02","test3","note3","400.00","30.00","430.00"],
                ["21","2007-10-01","test","note","200.00","10.00","210.00"],
                ["22","2007-10-02","test2","note2","300.00","20.00","320.00"],
                ["23","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["24","2007-10-04","test","note","200.00","10.00","210.00"],
                ["25","2007-10-05","test2","note2","300.00","20.00","320.00"],
                ["26","2007-09-06","test3","note3","400.00","30.00","430.00"],
                ["27","2007-10-04","test","note","200.00","10.00","210.00"],
                ["28","2007-10-03","test2","note2","300.00","20.00","320.00"],
                ["29","2007-09-01","test3","note3","400.00","30.00","430.00"],
                ["30","2007-09-02","test3","note3","410.00","30.00","440.00"],
                ["1","2010-05-24","test","note","300.00","10.00","2111.00"] ,
                ["2","2010-05-25","test2","note2","300.00","20.00","320.00"],
                ["3","2007-09-01","test3","note3","300.00","30.00","430.00"],
                ["4","2007-10-04","test","note","300.00","10.00","210.00"],
                ["5","2007-10-05","test2","note2","300.00","20.00","320.00"],
                ["6","2007-09-06","test3","note3","300.00","30.00","430.00"],
                ["7","2007-10-04","test","note","300.00","10.00","210.00"],
                ["8","2007-10-03","test2","note2","300.00","300.00","21.00","320.00"],
                ["9","2007-09-01","test3","note3","300.00","400.00","30.00","430.00"],
                ["10","2007-09-02","test3","note3","300.00","400.00","30.00","430.00"]
        ];
 
 var mydata2 = [
                {id:"1",invdate:"2010-05-24",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"2111.00"} ,
                {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
                {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"10",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"20",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"30",invdate:"2007-09-02",name:"test3",note:"note3",amount:"410.00",tax:"30.00",total:"440.00"},
                {id:"1",invdate:"2010-05-24",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"2111.00"} ,
                {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
                {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"10",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"20",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"30",invdate:"2007-09-02",name:"test3",note:"note3",amount:"410.00",tax:"30.00",total:"440.00"},
                {id:"1",invdate:"2010-05-24",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"2111.00"} ,
                {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
                {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"10",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"20",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"30",invdate:"2007-09-02",name:"test3",note:"note3",amount:"410.00",tax:"30.00",total:"440.00"},
                {id:"1",invdate:"2010-05-24",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"2111.00"} ,
                {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"300.00",tax:"30.00",total:"430.00"},
                {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"300.00",tax:"10.00",total:"210.00"},
                {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
                {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                {id:"10",invdate:"2007-09-02",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
        ];

</script>
<table id="list1"></table>
<table id="list2"></table>

Test runner

Ready to run.

Testing in
TestOps/sec
datatable grouping
$(document).ready(function() {
 $('#list1').dataTable( {
        "aaData": mydata1,
        "aoColumns": [
            { "sTitle": "Inv No" },
            { "sTitle": "Date" },
            { "sTitle": "Client" },            
            { "sTitle": "Notes", "sClass": "center"},
            { "sTitle": "Amount", "sClass": "center" },
            { "sTitle": "Tax", "sClass": "center"},            
            { "sTitle": "Total", "sClass": "center"}
        ],
        "bLengthchange": false,
        "bPaginate": false
    }).rowGrouping({ 
    }); 
} );
ready
jqGrid grouping
// async test
$(document).ready(function() {
 

    $("#list2").jqGrid({
        data: mydata2,
        datatype: "local",
        height: 'auto',
        rowNum:100,
        rowList:[10,30,50],
            colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
            colModel:[
                    {name:'id',index:'id', width:60, sorttype:"int"},
                    {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
                    {name:'name',index:'name', width:100, editable:true},
                    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
                    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},          
                    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},              
                    {name:'note',index:'note', width:150, sortable:false}               
            ],
        sortname: 'name',
        pager: 'plist2',
        viewrecords: true,
        toppager:true,


        grouping: true,
        groupingView : {
                groupField : ['name']
        },
        caption: "jqGrid Grouping Example"
    });
} );
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.