The implementation of the JQuery Easyui Learning Tutorial The DataGrid displays related prompts when no data is present _jquery

This example implements the Easyui DataGrid load/query data and, if there are no related records, displays a hint message in the DataGrid with no related records, as shown in the following illustration

This example implements the effect shown in the following illustration:

This example Easyui version 1.3.4, and if it doesn't work, check the Easyui version yourself

Different versions of Appendrow and MergeCells support are not the same, parameters inconsistent or something.

You cannot hide the pager container, you can use the chrome development tool or Firebug to view the relationship between the style of the pager container and the original DataGrid table table.

The source code is as follows

$ (function () {$ (' #dg '). DataGrid ({fitcolumns:true, url: ' Product.json ', Pagination:true, Pagesize:3, ONLOADSUC Cess:function (data) {if (data.total = = 0) {///Add a new row of data, the value of the first column is the message you need, and then merge the other columns into the first column, and note that modifying the colspan parameters for you columns the total number of columns configured $ (t His). DataGrid (' Appendrow ', {itemid: ' <div style= ' text-align:center;color:red ' > no relevant records! </div> '}). DataGrid (' MergeCells ', {index:0, field: ' Itemid ', colspan:4})//Hide the pager bar, which needs to be familiar with the HTML structure of the DataGrid, directly with the JQ 
Uery manipulate DOM objects, Easyui the DataGrid does not provide methods to hide the navigation bar $ (this). Closest (' Div.datagrid-wrap '). Find (' Div.datagrid-pager '). Hide (); //If data is reloaded by calling the reload method, the pager container else $ (this) is displayed. Closest (' Div.datagrid-wrap '). Find (' Div.datagrid-pager ') 
; }, Title: ' Easyui DataGrid No data shows no data message ', width:550, columns: [[{field: ' Itemid ', width:80, title: ' Item ID '}, {F Ield: ' ProductName ', width:100, Editor: ' Text ', title: ' Product Name '}, {field: ' ListPrice ', width:80, align: ' right ' , title: ' List Pirce '}, {field: ' UnitCost ', width:80, align: 'Right ', title: ' Unit Cost '}]}; 
}); Product.json {"Total": 0, "Rows": []}

The above is a small set to introduce the jquery Easyui Learning course of the implementation of the DataGrid in the absence of data display related to the content of all the narrative, hope to help everyone, if you have any questions welcome to my message, small series will promptly reply to everyone!

Let me introduce you to the JQuery Easyui DataGrid when no records, add "no data" hint

To operate on the Onloadsuccess event in the DataGrid:

Onloadsuccess:function (data) {
  if (data.total = = 0) {
    var BODY = $ (this). Data (). Datagrid.dc.body2;
    Body.find (' Table Tbody '). Append (' <tr><td width= ' + body.width () + ' "style=" height:35px; text-align:center; " >