jQuery EasyUI DataGrid - Creating Footer Summary
In this tutorial, we will show you how to display a summary information row in the footer of the datagrid.
To display the footer row, you should set the showFooter property to true, and then prepare the footer row defined in the datagrid data. Here is the example data:
{"total":1,"rows":[{"id":1,"name":"Chai","price":18.00}],"footer":[{"name":"Total","price":18.00}]}
Creating the DataGrid
<table id="tt" title="DataGrid" class="easyui-datagrid" style="width:400px;height:250px"
url="data/datagrid17_data.json"
fitColumns="true" rownumbers="true" showFooter="true">
<thead>
<tr>
<th field="name" width="80">Product Name</th>
<th field="price" width="40" align="right">Unit Price</th>
</tr>
</thead>
</table>
The footer row is the same as the data row, so you can display more than one summary information in the footer.