在使用jQuery的數據表格插件時,經常需要傳入參數來請求不同的數據,比如分頁、搜索、排序等操作。下面是關于jQuery datagrid傳參的一些介紹。
1. 傳遞參數的方式
<table id="dg"></table> <script> $('#dg').datagrid({ url: 'data.php', queryParams: { keyword: 'test', page: 1, rows: 10 } }); </script>
在上面的代碼中,我們通過queryParams屬性傳遞了3個參數,分別是keyword、 page和rows。這些參數會作為請求的查詢字符串發送到服務器端。類似地,我們也可以通過使用load方法來傳遞參數,如下:
<table id="dg"></table> <script> $('#dg').datagrid('load', { keyword: 'test', page: 1, rows: 10 }); </script>
2. 獲取參數的方式
<table id="dg"></table> <script> $('#dg').datagrid({ url: 'data.php', onLoadSuccess: function(data){ console.log(data.rows); // 數據行數組 console.log(data.total); // 數據總數 console.log(this.options.queryParams); // 查詢參數對象 } }); </script>
在上面的代碼中,我們可以通過onLoadSuccess事件獲取返回的數據和查詢參數對象。這樣我們可以對數據進行操作,比如數據過濾、排序等。
3. 動態修改參數
<table id="dg"></table> <script> $('#dg').datagrid({ url: 'data.php', queryParams: { keyword: 'test', page: 1, rows: 10 } }); $('#btn-search').click(function(){ var keyword = $('#txt-keyword').val(); var page = $('#txt-page').val(); $('#dg').datagrid('options').queryParams = { keyword: keyword, page: page, rows: 10 }; $('#dg').datagrid('reload'); }); </script>
在上面的代碼中,我們通過按鈕的點擊事件動態修改了查詢參數。這個示例代碼表示,點擊搜索按鈕時,獲取文本框中的關鍵字和頁碼,將它們作為新的查詢參數,然后重新加載數據。