Jquery Datagrid 翻頁是一種讓用戶可以瀏覽大量數據的方式。通常情況下,大量數據會被分成多個頁面,這樣用戶就可以逐頁瀏覽數據。下面是一些關于如何實現Jquery Datagrid翻頁的代碼示例。
//簡單的Jquery Datagrid翻頁代碼實現 $('#datagrid').datagrid({ pageNumber: 1, //初始頁碼 pageSize: 10, //每頁顯示的記錄數 pageList: [10,20,30,40], //可以選擇的每頁記錄數 pagination: true, //啟用分頁 rownumbers: true //顯示行號 }); //分頁回調函數 $('#datagrid').datagrid('getPager').pagination({ onSelectPage:function(pageNumber, pageSize){ //pageNumber: 要顯示哪一頁的索引 //pageSize: 每頁顯示的記錄數 $('#datagrid').datagrid('load',{ page: pageNumber, rows: pageSize }); } });
上面的代碼中,我們先設置了Jquery Datagrid的一些基本屬性,然后針對分頁進行了回調,當用戶點擊分頁的時候,代碼就會重新加載數據。
//帶有ajax異步請求的Jquery Datagrid翻頁代碼實現 $('#datagrid-ajax').datagrid({ pageNumber: 1, pageSize: 10, pageList: [10,20,30,40], pagination: true, rownumbers: true, url: 'data.json', loadFilter: function(data){ //data: 從服務器返回的數據 var result = {}; result.rows = data.rows; result.total = data.total; return result; } }); //分頁回調函數 $('#datagrid-ajax').datagrid('getPager').pagination({ onSelectPage:function(pageNumber, pageSize){ $('#datagrid-ajax').datagrid('loading'); $.ajax({ type: 'GET', url: 'data.json', data: { page: pageNumber, rows: pageSize }, success:function(data){ $('#datagrid-ajax').datagrid('loaded'); $('#datagrid-ajax').datagrid('loadData', data); } }); } });
上面的代碼中,我們使用了ajax異步請求來獲取分頁數據。其中,重點是loadFilter回調函數,這個函數可以對從服務器返回的數據進行處理,以便更好地適應Jquery Datagrid的使用。
總之,Jquery Datagrid 翻頁是一種非常常見的數據瀏覽方式,使用上述的代碼實現可以在實現這種功能的同時,提供更好的用戶體驗。
上一篇冀css0車牌怎么樣
下一篇兼容瀏覽器css代碼