May 09, 2021 jQuery EasyUI
In the example in this section, we'll show you how to create a footer summary in the jQuery EasyUI datagrid to display the summary information lines.
To display footer rows, you should set the showFooter property to true, and then prepare to define the footer rows in the data grid data. Here's the sample data:
{"total":1,"rows":[{"id":1,"name":"Chai","price":18.00}],"footer":[{"name":"Total","price":18.00}]}
<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>
Footer lines are the same as display data rows, so you can display more than one summary information in the footer.