关于datagrid
生活随笔
收集整理的這篇文章主要介紹了
关于datagrid
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
基本在公司使用的datagrid不需要自己寫前臺代碼，只需要自己給grid明確id，url以及列屬性即可。
后臺需要返回一個數據類型：{recordsFiltered=2, data=[], draw=null, recordsTotal=2}，通常返回這個數據類型的話，只需要調用datatable.js的ajaxTableQuery方法即可。由于業務需要，無法使用ajaxTableQuery，于是我自己返回了Map<String, Object>類型，result.put("draw", null);result.put("recordsTotal", 2);result.put("recordsFiltered", 2);result.put("data", list);由于很少接觸并了解datagrid前臺代碼，故出現問題除了百度沒有其他更好的方法，所以記錄下來datagrid的前臺代碼，了解其主要屬性后才將問題解決掉。
???????
<body> <div class="row-fluid"> ?<h3>JQuery DataTables插件自定義分頁Ajax實現</h3> ?<table id="example" class="display table-striped table-bordered table-hover table-condensed" cellspacing="0" width="100%"> ?<thead> ?<tr> ?<th>編號</th> ?<th>姓名</th> ?<th>性別</th> ?</tr> ?</thead> ?</table> </div> <script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.min.js"></script> <script src="http://cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script> <script type="text/javascript"> ?$(function () { ?//提示信息 ?var lang = { ?"sProcessing": "處理中...", ?"sLengthMenu": "每頁 _MENU_ 項", ?"sZeroRecords": "沒有匹配結果", ?"sInfo": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。", ?"sInfoEmpty": "當前顯示第 0 至 0 項，共 0 項", ?"sInfoFiltered": "(由 _MAX_ 項結果過濾)", ?"sInfoPostFix": "", ?"sSearch": "搜索:", ?"sUrl": "", ?"sEmptyTable": "表中數據為空", ?"sLoadingRecords": "載入中...", ?"sInfoThousands": ",", ?"oPaginate": { ?"sFirst": "首頁", ?"sPrevious": "上頁", ?"sNext": "下頁", ?"sLast": "末頁", ?"sJump": "跳轉" ?}, ?"oAria": { ?"sSortAscending": ": 以升序排列此列", ?"sSortDescending": ": 以降序排列此列" ?} ?}; ?//初始化表格 ?var table = $("#example").dataTable({ ?language:lang, //提示信息 ?autoWidth: false, //禁用自動調整列寬 ?stripeClasses: ["odd", "even"], //為奇偶行加上樣式，兼容不支持CSS偽類的場合 ?processing: true, //隱藏加載提示,自行處理 ?serverSide: true, //啟用服務器端分頁 ?searching: false, //禁用原生搜索 ?orderMulti: false, //啟用多列排序 ?order: [], //取消默認排序查詢,否則復選框一列會出現小箭頭 ?renderer: "bootstrap", //渲染樣式：Bootstrap和jquery-ui ?pagingType: "simple_numbers", //分頁樣式：simple,simple_numbers,full,full_numbers ?columnDefs: [{ ?"targets": 'nosort', //列的樣式名 ?"orderable": false //包含上樣式名‘nosort'的禁止排序 ?}], ?ajax: function (data, callback, settings) { ?//封裝請求參數 ?var param = {}; ?param.limit = data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候 ?param.start = data.start;//開始的記錄序號 ?param.page = (data.start / data.length)+1;//當前頁碼 ?//console.log(param); ?//ajax請求數據 ?$.ajax({ ??type: "GET", ??url: "/hello/list", ??cache: false, //禁用緩存 ??data: param, //傳入組裝的參數 ??dataType: "json", ??success: function (result) { ??//console.log(result); ??//setTimeout僅為測試延遲效果 ??setTimeout(function () { ??//封裝返回數據 ??var returnData = {}; ??returnData.draw = data.draw;//這里直接自行返回了draw計數器,應該由后臺返回 ??returnData.recordsTotal = result.total;//返回數據全部記錄 ??returnData.recordsFiltered = result.total;//后臺不實現過濾功能，每次查詢均視作全部結果 ??returnData.data = result.data;//返回的數據列表 ??//console.log(returnData); ??//調用DataTables提供的callback方法，代表數據已封裝完成并傳回DataTables進行渲染 ??//此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢 ??callback(returnData); ??}, 200); ??} ?}); ?}, ?//列表表頭字段 ?columns: [ ?{ "data": "Id" }, ?{ "data": "Name" }, ?{ "data": "Sex" } ?] ?}).api(); ?//此處需調用api()方法,否則返回的是JQuery對象而不是DataTables的API對象 ?}); </script> </body>
轉載于:https://www.cnblogs.com/qingzhongcao/p/7047487.html
總結
以上是生活随笔為你收集整理的关于datagrid的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： swift变量和函数
- 下一篇： 使用 sitemesh/decorato