Quelqu'un peut-il me dire comment implémenter la pagination côté serveur avec la grille Kendo UI côté client?
UPDATE: Nous avons publié une bibliothèque .NET open source qui facilite beaucoup la pagination, le tri et le filtrage.
La grille envoie les valeurs actuelles pageSize
et skip
une fois que vous avez défini serverPaging
sur true
. Sur le serveur, vous devez paginer vos données en utilisant les informations fournies et les renvoyer avec le nombre total d’éléments. Voici un extrait de code:
public ActionResult Products(int pageSize, int skip)
{
using (var northwind = new NorthwindDataContext())
{
var products = northwind.Products;
// Get the total number of records - needed for paging
var total = products.Count();
// Page the data
var data = products.Skip(skip).Take(pageSize).ToList();
// Return as JSON - the Kendo Grid will use the response
return Json(new { total = total, data = data });
}
}
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "home/products",
dataType: "json",
type: "POST"
}
},
schema: {
data: "data", // records are returned in the "data" field of the response
total: "total" // total number of records is in the "total" field of the response
},
serverPaging: true // enable server paging
}
});
Pour implémenter la pagination de serveur, le format correct doit être renvoyé du serveur. Pour le format JSON de pagination côté serveur, cela ressemblera à quelque chose comme ci-dessous JSON: -
{ "mytotal":1069, "mydata": [{ ProductID : 1, ProductName : "Chai"}, { ProductID : 2, ProductName : "Chang" }]}
Indiquez au kendo que la grille sélectionne le nombre total d'enregistrements dans l'objet total et les lignes de données dans les données mydata
schema: {
data: "mydata"
total: "mytotal" // total is returned in the "total" field of the response
}
Voir exemple de détail ici
La réponse acceptée n'a pas de solution d'interface utilisateur; fournit uniquement une réponse jQuery. Si cela peut aider quelqu'un d'autre, voici la solution qui a fonctionné pour notre grille de kendo dans l'interface utilisateur:
extrait de code du contrôleur
DataSourceResult result = new DataSourceResult()
{
Data = dataSet,
Total = recordCount
};
return Json(result, JsonRequestBehavior.AllowGet);
extrait de code de View
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("*<our method>*", "*<our controller>*")
)