Tabulator: 4.9 - Google Chrome
I can't seem to get ajaxProgressiveLoad functioning as expected. (constructor is shown below).
The php file queries a SQL database and currently returns 107,000 records and is returned as a json:
echo(json_encode(["last_page"=>1, "data"=>$data]));
(A side question ref last_page - how is this determined when dealing with large datasets?)
The SQL query itself takes approx 1.5 seconds to return the data, but it seems as if the tabulator is waiting for all the data before displaying all the records after 20 seconds.
20:26:29.586 Callback: ajaxRequesting
20:26:51.059 Callback: ajaxResponse
This dataset is expected to grow and it would be preferable for the user to see some data immediatley or at least after a few seconds. Is there something i've missed in the constructor or on the php file?
Thanks in advance for any guidance offered
Chris
var table = new Tabulator("#tabulator-table", {
index:"Counter",
//initialSort:[{column:'Date', dir:'desc'}],
height:(window.innerHeight - 100),
layout:"fitDataStretch",
tooltips:true,
tooltipsHeader:true,
placeholder:"Please wait - retrieving data....",
ajaxURL:"tabulatorSELECT_vMPS_Extract.php",
ajaxParams:{CDSDealerCodes:strCDSDealerCodes},
ajaxProgressiveLoad:"load",
//ajaxProgressiveLoadDelay:200, //wait 200 milliseconds between each request
ajaxRequesting:function(url, params){
//url - the URL of the request
//params - the parameters passed with the request
console.log("Callback: ajaxRequesting");
},
ajaxResponse:function(url, params, response){
//url - the URL of the request
//params - the parameters passed with the request
//response - the JSON object returned in the body of the response.
console.log("Callback: ajaxResponse");
return response; //return the response data to tabulator
},
headerFilterPlaceholder:"...",
columns:[
{title:'Date', field:'Date', headerFilter:'input', sorter:'datetime', bottomCalc:'count'},
{title:'Amount', field:'Amount', headerFilter:'input', hozAlign:'right', formatter:"money", bottomCalc:"sum", bottomCalcParams:{formatter:"money"}, bottomCalcFormatter:"money"},
{title:'Currency', field:'Currency', headerFilter:'input'},
{title:'Programme', field:'Programme', headerFilter:'input'}
]
});
The point of the progressive ajax loading is that you DONT send all the data in one go which is exactly what you are doing there, which is why it is running slow.
You should paginate the data into chunks of say 20 rows at a time (the number of rows is up to you)
Tabulator will then request the data page by page as it is needed to be displayed, it tells you which chunk to return in the page param sent with the request.
the last_page property in the returned data should be the total number of available rows divided by the page size (rounded up)
Related
Instagram began to give a new response to the request https://www.instagram.com/explore/locations/.../?__a=1 :
{"graphql":{"native_location_data:{...
old response is: {"graphql":{"location":{...
Pagination https://www.instagram.com/explore/locations/.../?__a=1&max_id=... don't work: Instagram responds as well as the first request (https://www.instagram.com/explore/locations/.../?__a=1)
P.S. Pagination for tags (with a new response) works correctly
P.P.S. Not all users have a new response to the request
The "native_location_data" response Object requires a different function to traverse. For example, if you want to catch all images, use this example:
sections = instagram_resp['native_location_data']['recent']['sections']
for sub_section in sections:
if sub_section['layout_type'] == 'media_grid':
for item in sub_section['layout_content']['medias']:
if item['media'].get('image_versions2'):
largest_res = sorted(
item['media']['image_versions2']['candidates'],
key=lambda o: o['height'] * o['width']
)[-1]['url']
Based on this question.
I initialize my datatables.js table with the following code:
var table_entity = $('#myTable').DataTable({
"pageLength":getParameterByName('pageLength'),//getting param from query string
fixedHeader: true,
"ajax": {
"url": myUrl,
"data": function(d) {
d.type = $('#mytype').val();
}
}
});
So I know how to reload my datatable with different ajax params. Now I need to reload it with different pageLength param which does not belong to ajax section and is recorded during datatables init stage. I tried to pass it directly during reloading with the following code:
table_entity.ajax.reload({
"pageLength":77 //some new param different from the initial one
});
But it did not work, the table is reloaded with initial pageLength value. Any ideas how to fix it would be welcome. Thank you.
UPD_1
managed to do that with
1st: complete destruction of a table:
$('#MyTable').DataTable().destroy();
$('#MyTable tbody').empty();//note tbody here
2nd: reinit the table with updated params:
table_data.displayStart = Number(getParameterByName('displayStart'));
table_data.pageLength = Number(getParameterByName('pageLength'));
table_data.iDisplayStart = Number(getParameterByName('displayStart'));
table_data.iDisplayLength = Number(getParameterByName('pageLength'));
$('#MyTable').DataTable(table_data);
Note 2 params - iDisplayStart and iDisplayLength here
Is it possible to do the same without destruction of the table, but during ajax.reload phase? Thank you.
Is it possible to do the same without destruction of the table, but
during ajax.reload phase?
You can hook into the xhr.dt event and update page.len() from there. Example :
$('#example').on('xhr.dt', function(e, settings, json, xhr) {
table.page.len(json.data.length).draw()
})
Will dynamically set the page length to maximum i.e length of data. Demo -> http://jsfiddle.net/d72zbyus/
So you could use table.page.len(77).draw() or whatever. xhr.dt is triggered after each AJAX request.
It is not clear to me where your new pageLength come from exactly. If it is part of the returned JSON (as I suspect) you could do table.page.len(json.pageLength).draw().
I am able to get customer sources only 1st 10 via get customer API:
# stripe.customers.retrieve
{
"id": "cus_DE8HSMZ75l2Dgo",
...
"sources": {
"object": "list",
"data": [
],
"has_more": false,
"total_count": 0,
"url": "/v1/customers/cus_DE8HSMZ75l2Dgo/sources"
},
...
}
But how do I get more? Is the only way via an AJAX call? I was thinking there should be a function somewhere in the SDK?
When you retrieve a Customer object via the API, Stripe will return the sources property which is a List object. The data property will be an array with up to 10 sources in it.
If you want the ability to get more sources than the 10 most recent ones, you will need to use Pagination. The idea is that you will first get a list of N objects (10 by default). Then you will request the next "page" from Stripe by asking for N objects again but using the parameter starting_after set to the id of the last object in the previous page. You will continue doing that until the has_more property in the page returned is false indicating you retrieved all the objects.
For example if your Customer has 35 sources, you would get the first page (10), then call list to get 10 more (20), then 10 more again (30) and then the last call would return only 5 sources (35) and has_more would be false.
To decrease the number of calls, you can also set limit to a higher value. The maximum value is 100 in that case.
Here's what the code would look like:
// list those cards 3 at a time
var listOptions = {limit: 3};
while(1) {
var sources = await stripe.customers.listSources(
customer.id,
listOptions
);
var nbSourcesRetrieved = sources.data.length;
var lastSourceId = sources.data[nbSourcesRetrieved - 1].id;
console.log("Received " + nbSourcesRetrieved + " - last source: " + lastSourceId + " - has_more: " + sources.has_more);
// Leave if we are done with pagination
if(sources.has_more == false) {
break;
}
// Store the last source id in the options for the next page
listOptions['starting_after'] = lastSourceId;
}
You can see a full running example on Runkit here: https://runkit.com/5a6b26c0e3908200129fbb5d/5b49eabda462940012c33880
Taking a quick look into the sources of the stripe-node package, it seems there is a stripe.customers.listSources method, which takes a customerId as parameter and requests to the correct url. I suppose it works similar to the listCards method. But I couldn't find it in the docs, so you have to treat it as an undocumented feature ... But maybe it's just an error in the docs. You could contact the support about it. We used stripe in an old project and they appreciated any input on their documentation.
As of stripe-node 6.11.0, you may auto-paginate list methods, including customer sources. Stripe provides a few different APIs for this to aid with a variety of node versions and styles.
See the docs here
The important part to notice is .autoPagingEach:
await stripe.customers.listSources({ limit: 100 }).autoPagingEach(async (source) => {
doSomethingWithYourSource(source)
})
My code looks like below. I am feching the json records from the server side using structs action. it is returning the records fine and i could able to see the table with data. pagination links created fine. when i click next and datasource is called on each click of any link on the pagination. if i click on colum header also, the datasource is being called.
my questions are:
1)When datasource is being called. because i am seeing sometime called and some times not. like when i got from 1page to 2page, datasource is called fine. when i go back to previous pages by clicking 'prev' link, datasource is being called. but after that if i click again on next to go to 2nd page, datasource is not being called. when exactly datasource is called and how many times it will called. is it for every link in the pagination calls datasource?
2)If my datasource returns 100 recods of data and my records per page is set to 25, then do i see the 4 pages. I am confused here with server side pagination and datasource calls.
datasource is not called for each page link and next or prev link clicks? if not, when datasource is called? please explain me. I know how many total records are there in the begining and my requirement is showing 25 records per page when ever user clicks on page number or next or prev links. i have the capability to bring corresponding 25 records based on the page number from server side.
3)how to capture the 'next' and 'prev' clicks on the pagination.
my requirement is to dynamically fetch the json data using datasource from the server whenever user click on page number links or next or prev.
Please help me out with this. I am new to YUI. I have to User YUI 2 only since we are already using it.
<div id="dynamicdata"></div>
<script type="text/javascript">
YAHOO.example.DynamicData = function() {
var myColumnDefs = [ // sortable:true enables sorting
{key:"PIN", label:"PIN", sortable:true},
{key:"CODE", label:"CODE", sortable:true}
];
// Customize request sent to server to be able to set total # of records
var generateRequest = function(oState, oSelf) {
// Get states or use defaults
oState = oState || { pagination: null, sortedBy: null };
var sort = (oState.sortedBy) ? oState.sortedBy.key : "PIN";
var dir = (oState.sortedBy && oState.sortedBy.dir === YAHOO.widget.DataTable.CLASS_DESC) ? "desc" : "asc";
var startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0;
var results = (oState.pagination) ? oState.pagination.rowsPerPage : 25;
var total = YAHOO.util.Dom.get("total").value *1;
// Validate input
if(!YAHOO.lang.isNumber(total) || total < 0 || total > 200) {
YAHOO.util.Dom.get("total").value = 0;
total = 0;
alert("Total must be between 0 and 200.");
}
// Build custom request
return "sort=" + sort +
"&dir=" + dir +
"&startIndex=" + startIndex +
"&results=" + (startIndex + results) +
"&total=" + total;
};
// DataTable configuration
var myConfigs = {
generateRequest: generateRequest,
initialRequest: generateRequest(), // Initial request for first page of data
dynamicData: true, // Enables dynamic server-driven data
sortedBy : {key:"PIN", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
paginator: new YAHOO.widget.Paginator({ rowsPerPage:10 }) // Enables pagination
};
var myDataSource = new YAHOO.util.DataSource("<%=request.getContextPath()%>/results.do?startIndex="+localStartIndex+"&rowsPerPage="+rowsPerPage);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {
resultsList: "data",
fields: [
{key:"SSN"},
{key:"PIN"}
]
}
var myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource, myConfigs);
// DataTable instance
var myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource, myConfigs);
// Update totalRecords on the fly with values from server
myDataTable.doBeforeLoadData = function(oRequest, oResponse, oPayload) {
oPayload.totalRecords = 200;
return oPayload;
};
return {
ds: myDataSource,
dt: myDataTable
};
}();
As far as I remember, the DataTable will always ask for fresh data whenever it changes pages or sorts by a different column. It doesn't cache previous requests nor does it keep track what it has asked. If you don't see requests arriving on the server side it might be because of caching, but not in DataTable or DataSource but by the browser itself, which is a matter of issuing the proper headers on the server to tell the browser not to cache.
If I am not mistaken, that this is supported by the behavior you describe. The first page is requested twice, once when you first draw the table, once again when you return from page 2. All other pages are never requested twice. Why? Because the first time around the URL formed is slighty different from the URL when you return to it. The browser cache only knows about URLs.
I am intiating a loading panel in init method and hiding it in ReturnDataPayload event.This is working perfectly when data Table has got some values in it.But when there is no data returned from database , the control is not going to returnDataPayLoad event.Please help me in finding an event which will be fired even when the response doesn't have any data or tell me a way to hide the loading panel.
If you want a custom behavior, use DataSource's sendRequest method of the dataTable's dataSource
(function() {
var YdataTable = YAHOO.widget.DataTable,
YdataSource = YAHOO.util.DataSource;
var settings = {
container:"<DATATABLE_CONTAINER_GOES_HERE>",
source:"<URL_TO_RETRIEVE_YOUR_DATA>",
columnSettings:[
{key:"id", label:"Id"}
],
dataSourceSettings:{
responseType:YdataSource.TYPE_JSON,
responseSchema:{
resultsList:"rs",
fields:[
{key:"id"}
]
}
},
dataTableSettings:{
initialLoad:false
}
}
var dataTable = new YdataTable(
settings.container,
settings.columnSettings,
new YdataSource(
settings.source,
settings.dataSourceSettings),
settings.dataTableSettings);
})();
keep in mind No matter which source is your data: XML, JSON, JavaScript object, TEXT, you always will get your data in a unified way through DataSource's sendRequest method. So when you want to retrieve your data and, at the same time, add custom behavior, use it
dataTable.getDataSource().sendRequest(null, {
success:function(request, response, payload) {
if(response.results.length == 0) {
// No data returned
// Do what you want right here
// You can, for instance, hide the dataTable by calling this.setStyle("display", "none");
} else {
// Some data returned
// If you want to use default the DataTable behavior, just call
this.onDataReturnInitializeTable(request, response, payload);
}
},
scope:dataTable,
argument:dataTable.getState()
});
The properties of the response are
results (Array): Your source of data in a unified way. For each object in the results Array, There is a property according to responseSchema's fields property. Notice i use response.results.length to verify if some data has been returned
error (Boolean): Indicates data error
cached (Boolean): Indicates cached response
meta (Object): Schema-parsed meta data
On the YUI dataTable page, look for Loading data at runtime to see some built-in functions provided by YUI dataTable
I hope it can be useful and feel free to ask for help for anything else you want about YUI. See a demo page of nice features of YUI dataTable