Jquery Bootgrid - 以編程方式更改當前頁面

我有一個帶有json數據（不使用ajax）的「Bootgrid」網格。Jquery Bootgrid - 以編程方式更改當前頁面

分頁按鈕正常工作，但我想以編程方式更改當前頁面。（「＃grid」）。bootgrid（）。setCurrentPage（100）;類似於$（「＃grid」）的其他內容。

我沒有看到API提供了一個方法，所以我該如何實現它？

2017-03-08 Rombus

如您所見，bootgrid不提供內置方式來更改當前頁面。不過，您可以擴展它。

此加入一些.js文件您加載你的頁面：

$.fn.bootgrid.Constructor.prototype.setCurrentPage = function (page) { 
    $(this).find('li.page-' + this.current).removeClass('active'); 
    $(this).find('li.page-' + page).addClass('active'); 
    this.current = page; 
    return this; 
}

你可以將其粘貼在同.js用於構建bootgrid和加載數據

然後你可以在你的網格中使用它，像這樣：

// create the grid... 
var grid = $("#grid-data").bootgrid({ 
    ajax: false 
}); 

// add some rows with json data 
grid.bootgrid('append', 
[ 
    { 
     "id": 19, 
     "sender": "[email protected]", 
     "received": "2014-05-30T22:15:00" 
    }, 
    { 
     "id": 14, 
     "sender": "[email protected]", 
     "received": "2014-05-30T20:15:00" 
    }, 
    // ....many rows 
]); 

// call your custom method, to change to page 3 
grid.bootgrid('setCurrentPage', 3); 
// calling sort is just a workaround, so bootgrid reloads itself... 
grid.bootgrid('sort');

所以基本上，我添加了一個新的方法，以它的原型，這將改變active按鈕（只是爲了造型的目的），並改變bootgrid的current財產。

改變頁面號碼後，我們調用sort方法作爲一種解決方法，以力bootgrid重裝其數據，而不重置的頁面數量，reload會。

檢查this JSFiddle我創建的。嘗試一下！！

來源

2017-03-09 03:47:38 Alisson

謝謝！我非常喜歡這個解決方案。我最終修改了bootgrid.js以包含一個基本上是load（）副本但將當前行設置爲指定的行的showPage（）方法。 – Rombus

哦，這很好，我想提供此選項作爲替代方法，但請記下縮小版本將不起作用（除非您自己縮小並替換它，或者不使用縮小版本）。在關於另一個特性的另一個回答中，我建議在'bootgrid.js'內部做'Grid.prototype.doSomething = function（）'。我想他們不會發布新版本，所以更新軟件包時可能沒有問題，並且忘記再次添加此代碼。 – Alisson

Jquery Bootgrid - 以編程方式更改當前頁面

回答

相關問題