[英]Webix Datatable || Load data server side
I have data in thousands so it takes time to load data.我有成千上万的数据,所以加载数据需要时间。 that why I need to load limited data from the server-side.so it can load faster.
这就是为什么我需要从服务器端加载有限的数据。所以它可以加载得更快。 For example, by default it fetches data from only for one page but when I click on the second page it fetches data from a server for second page and so on.
例如,默认情况下,它仅从一页获取数据,但是当我单击第二页时,它会从服务器获取第二页的数据,依此类推。 Here is my code
这是我的代码
webix.i18n.pager = {
first: "First",
last: "Last",
next: "Next",
prev: "Prev"
};
var columnConfig = [
{ id:"select", header:{ content:"masterCheckbox", css:{"text-align":"center"} }, fillspace:0.8, css:{"text-align":"center"}, template:"{common.checkbox()}"},
{ id:"id", header:"", hidden:true},
{
id:"name",
header:["Name", {content:"textFilter"}],
fillspace:4,
sort:"string"
},
{
id:"city",
header:["city", {content:"textFilter"}],
fillspace:4,
sort:"string"
},
{
id:"email",
header:["email", {content:"textFilter"}],
fillspace:4,
sort:"string"
},
{ id:"edit", header:"", fillspace:0.8, template:'<i class="fa fa-edit btn-edit"></i>',css:{"cursor":"pointer"}},
{ id:"delete", header:"", fillspace:0.8, template:'<i style="color:red" class="fa fa-trash-o btn-delete"></i>',css:{"text-align":"left", "cursor":"pointer"}},
];
webix.ready(function()
{
var activeColumn = null;
dtable = new webix.ui({
container: "grid",
view: "datatable",
id: "grid",
hover: "webix-datatable-hover",
select: "row",
multiselect: true,
dragColumn: true,
drag: true,
//leftSplit:1,
resizeColumn: true,
resizeRow: true,
navigation: true,
scrollX: false,
scrollY: false,
autoheight: true,
autoConfig: true,
editable: true,
editor: "text",
url: "ajax.php",
datafetch:10,
loadahead:0,
datathrottle:10,
columns: columnConfig,
on: {
onBeforeLoad:function(){
this.showOverlay("Loading...");
},
onAfterLoad:function(){
this.hideOverlay();
calculateGridPageItems('grid');
},
onBeforeFilter:function(){
var activeNode = document.activeElement;
if (activeNode.tagName == 'INPUT')
activeColumn = this.columnId(activeNode.closest('td[column]').getAttribute('column'));
},
onAfterFilter:function(){
if (activeColumn){
this.getFilter(activeColumn).focus();
var caret = this.getFilter(activeColumn).value.length;
// since IE9
this.getFilter(activeColumn).setSelectionRange(caret, caret);
activeColumn = null;
}
}
},
pager: {
template: "{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}",
container: "paging",
size: 10,
group: 5,on:{
onAfterPageChange:function(new_page){
calculateGridPageItems('grid');
}
}
}
});
});
function gridPageSizeChange(e, gridId) {
var grid = $$(gridId);
grid.getPager().config.size = e.value*1;
grid.refresh();
calculateGridPageItems(gridId);
}
function calculateGridPageItems(gridId) {
var grid = $$(gridId);
var total = grid.count();
var visibleRows = grid.getVisibleCount();
var pageSize = grid.getPager().config.size;
var pageIndex = grid.getPager().config.page;
var start = (pageSize * pageIndex)+1;
var end = start + visibleRows;
$('#pageStart').html(start);
$('#pageEnd').html(end);
$('#pageTotal').html(total);
}
**and json reponse: ** i make it according to this structure **和 json 响应:** 我按照这个结构做
I am not sure what the actual question is here, but if the question is "how to write php backend code for dynamic loading", I could recommend viewing these package samples: https://docs.webix.com/samples/40_serverside/01_php/我不确定这里的实际问题是什么,但如果问题是“如何编写 php 后端代码以进行动态加载”,我建议您查看这些 package 示例: Z5E056C500A1C4B6A7110B7D8Z示例: 01_php/
Most of the server-side samples are for NodeJs now, you can find them in plenty in the Snippet Tool .现在大多数服务器端示例都是针对 NodeJs 的,您可以在Snippet Tool中找到大量示例。 There are also a few useful pages in the documentation, eg https://docs.webix.com/desktop__plain_dynamic_loading.html
文档中还有一些有用的页面,例如https://docs.webix.com/desktop__plain_dynamic_loading.html
If I am wrong about the question, please be kind to comment, I would be happy to help if I can.如果我对这个问题有误,请发表评论,如果可以的话,我很乐意提供帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.