jQuery EasyUI データ グリッド - カスタム ページネーション

データ グリッド (datagrid) には、優れた機能を備えた組み込みのページネーション機能があり、カスタマイズは非常に簡単です。このチュートリアルでは、データ グリッド (datagrid) を作成し、ページネーション ツールバーにいくつかのカスタム ボタンを追加します。

データ グリッド (DataGrid) を作成する

    <table id="tt" title="データの読み込み" class="easyui-datagrid" style="width:550px;height:250px" url="data/datagrid_data.json" iconCls="icon-save" pagination 
            = 
            " true"> 
        <thead> 
            <tr> 
                <th field="itemid" width="80">商品ID</th> 
                <th field="productid" width="80">商品ID</th> 
                <th field ="listprice" width="80" align="right">定価</th> 
                <th field="unitcost" width="80" align="right">単価</th>
                <th field="attr1" width="100">属性</th> 
                <th field="status" width="60" align="center">ステータス</th> 
            </tr> 
        </thead> 
    </table>

ページネーション ツールバーが生成されるように、'pagination' プロパティを true に設定することを忘れないでください。

ページネーション ツールバーをカスタマイズする

    var pager = $('#tt').datagrid('getPager'); // データグリッドのページャーを取得
    pager.pagination({ 
        showPageList:false, 
        buttons:[{ 
            iconCls:'icon-search', 
            handler:function(){ 
                alert('search'); 
            } 
        },{ 
            iconCls:'icon- add', 
            handler:function(){ 
                alert('add'); 
            } 
        },{ 
            iconCls:'icon-edit', 
            handler:function(){ 
                alert('edit'); 
            } 
        }], 
        onBeforeRefresh:function() {
            alert('更新前'); 
            true を返します。
        } 
    });

ご覧のとおり、最初にデータグリッドのページャー オブジェクトを取得してから、ページネーションを再作成します。ページ リストを非表示にして、3 つの新しいボタンを追加します。