Error with Remote Pagination in Tabulator 5.0 - javascript

My tabulator 5.0 table works fine. But when I attempt to use remote pagination it no longer works at all.
var table = new Tabulator("#account-tran-detail-table", {
pagination:true,
paginationMode:"remote", //if this line is commented out then it works fine without pagination
paginationSize: 12,
dataSendParams:{
page: "page",
size: "page_size",
},
dataReceiveParams:{
last_page:"total_pages",
} ,
ajaxResponse:function(url, params, response){
return response.results; // return the array of table items
},
});
table.on("tableBuilt", function(){
table.setColumns(columns);
});
function generateReport () {
table.clearData();
var columns = [
{title:"id", field:"id", headerFilter:false, visible:false, download:true},
{title:"name", field:"name", headerFilter:false, visible:false, download:true},
];
var gender = "m";
var url = "/api/v1/myendpointname/";
var append_params = "?gender=" + gender;
$("#tableBuilt").destroy;
table.setData(url + append_params);
};
The response looks like this:
{
"count": 10,
"total_pages": 3,
"next": "http://localhost:8000/myendpointname/?gender=m&page=2&size=3
"previous": null,
"results": [
{
"id": 1,
"gender": "m",
"name": "abc",
},
{
"id": 2,
"gender": "m",
"name": "def",
},
{
"id": 3,
"gender": "m",
"name": "ghi",
},
]
}
You can see where I'm asking tabulator to read total_pages instead of the default last_page by using dataReceiveParams. And you can also see where I'm asking tabulator to send page_size instead of the default size by using dataSendParams to generate the request.
I get two warnings . . .
Remote Pagination Error - Server response missing 'undefined' property Page.js:707:11
Remote Pagination Error - Server response missing 'undefined' property Page.js:754:11
Followed by an error.
Data Loading Error - Unable to process data due to invalid data type
Expecting: array
Received: undefined
Data: undefined
The code referenced by the warnings:
707: console.warn("Remote Pagination Error - Server response missing '" + this.dataReceivedNames.last_page + "' property");
754: console.warn("Remote Pagination Error - Server response missing '" + this.dataReceivedNames.data + "' property");
So it seems to me that tabulator isn't "seeing" the total_pages portion of the response. Why is it not using defaultReceiveParams? Could it be because of my ajaxResponse function returns response.results and strips the rest of the response away?
(Same behavior for Chrome and Firefox)

Use ajaxResponse to return data and last_page as
Codesandbox

Related

How to correctly retrieve a document from PropDB using specific formatting in the http Trigger GET request (Azure Function)

Here is my issue:
I am trying to set-up an http trigger using Azure functions in javascript. I have been able to post this data into Cosmosdb using my POST function.
CosmosDB Example Item I am looking for:
{
"id": "POLL:FAVECOLORS:LM:LMBWZ18",
"partition": "POLL:LM",
"value": {
"name": "fave colors poll",
"question": "Which color do you like the most?",
"answers": [
{
"text": "Orange",
"count": 0
},
{
"text": "Yellow",
"count": 0
},
{
"text": "Blue",
"count": 0
}
]
},
"_rid": "<info>",
"_self": "<info>",
"_etag": "\"<info>\"",
"_attachments": "<info>/",
"_ts": <info>
}
I am trying to pull this information via input into my Azure Function.
Here is my function.json.
{
"bindings": [
{
"authLevel": "function",
"type": "httpTrigger",
"direction": "in",
"name": "req",
"route": "<MyURL>/{type}/{objname}/{brand}/{site}",
"methods": [
"get",
"post",
"patch"
]
},
{
"type": "http",
"direction": "out",
"name": "$return"
},
{
"name": "CosmosSend",
"type": "documentDB",
"databaseName": "PropDB",
"collectionName": "WithoutCCN",
"createIfNotExists": false,
"connection": "<Connection-Info>",
"direction": "out"
},
{
"type": "documentDB",
"name": "documents",
"databaseName": "PropDB",
"collectionName": "WithoutCCN",
"connection": "<Connection-Info>",
"direction": "in",
"sqlQuery": "SELECT * FROM c WHERE c.id = {id}"
}
],
"disabled": false
}
I am not sure how I can change my requests format so that it uses the request parameters for the query instead of looking for "https:///{type}/{objname}/{brand}/{site}?id=POLL:FAVECOLORS:LM:LMBWZ18"
module.exports = function (context, req) {
var documents = context.bindings.documents;
var totalDocuments = documents.length;
var azureAppId = req.headers["azure-app-id"];
context.log('azure-app-id = ' + azureAppId);
var idx = '' + (req.params.type + ':' + req.params.objname + ':' + req.params.brand + ':' + req.params.site).toUpperCase();
var paritionx = '' + (req.params.type + ":" + req.params.brand).toUpperCase();
var valuex = req.body;
if (req.method === 'GET') {
context.log('Found '+ totalDocuments +' documents');
if(totalDocuments === 0)
{
context.done(null, createResult(200, 'application/json', "The
requested document was not found."));
}
else {
context.done(null, createResult(200, 'application/json', documents));
}
} else if (req.method === 'POST') {
if (typeof req.body === 'object') {
context.bindings.CosmosSend = JSON.stringify({
id: idx,
partition: paritionx,
value: valuex
});
context.done(null, createResult(201, 'application/json', req.body));
}
else {
context.done(null, createResult(400, 'text/plain', 'The message must be of type application/json.'));
}
I have tried to take the variable 'idx' and put that into the query since it is already in the same format as the POST sends the 'id', but since it is not apart of the function.json itself it cannot be found. If I change the query in the function to:
"sqlQuery": "SELECT * FROM c WHERE c.id = /"{TYPE}:{OBJNAME}:{BRAND}:{SITE}/""
and anything remotely close to that kinda thinking it doesnt work. If I shove what I am looking for exactly into it:
"sqlQuery": "SELECT * FROM c WHERE c.id = \"POLL:FAVECOLORS:LM:LMBWZ18\""
It will find it perfectly every time, but only that one record, and it defeats the purpose of the GET request including its own target information.
I have really been racking my brain on this issue and any tips would really help. I have read a lot of microsoft docs related to the Azure Function and javascript but nothing has helped with this specific issue.
The expected results will be the item in cosmos returned when given the http GET request from the Azure Function app. it will look for the item by the information located in the URL of the request.
Have you tried adding the id as an optional parameter in the route?
"route": "<MyURL>/{type:alpha}/{objname:alpha}/{brand:alpha}/{site:alpha}/{id:alpha?}",
Keep in mind though, that doing this in the same HTTP Trigger Function will always execute the query, even on a POST where you don't send the id. So you are consuming RU's that you are not using.
Ideally you would split this into separate Functions, one for POST, one for GET, which helps them scale independently and you have a greater separation of concerns.

Datatable search in nested table

I'm using metronic v5.0.7.1 i have a datatable which is contains nested array so i just want to search in this array.
I'm able to bind my case status like that;
{
field: 'case.case_status',
title: "Status",
}
there is my search field;
var query = datatable.getDataSourceQuery();
$('#m_form_durum').on('change', function () {
datatable.search($(this).val(), 'case.case_status');
}).val(typeof query.case.case_status !== 'undefined' ? query.case.case_status : '');
After that im getting this error "Cannot read property 'case_status' of undefined". How can I specify the nested field in this case?
By the way if I replace my field to 'count' which is in my array instead of 'case.case_status' its work very well. Just nested fields give this error.
Also this is my sample data:
[
{
"id": 93,
"case": {
"id": 99,
"case_status": 1,
},
"user": "1",
"count": "2",
"created_at": "2018-02-08T09:00:00.884590+03:00",
"modified_at": "2018-02-08T09:00:00.884612+03:00",
"is_deleted": false,
}
]

Web scraping dynamic content with phantomjs

Im trying to scrape data from a site that generates its data via a javascript but I cant seem to locate the invoking script. When I look at the page source there is an in-page script that has a variable which has an array of the data I wish to retrieve but there is another script which contains all the codes for the various companies I wish to retrieve data from. This is what i've tried so far:
var url = 'http://www.asx.com.au/asx/share-price-research/company/ZAM/details';
var page = require('webpage').create();
page.open(url, function (status) {
var digitalData = page.evaluate(function () {
return window.digitalData;
})page.then(function (digitalData) {
console.log
}
('DigtalData is ' + digitalData));
phantom.exit();
});
Unfortunately the above script doesnt output anything. The script which contains the codes for the companies I want to get the data from I think is this:
var locationPath = window.location.pathname.split('/');
var companyCode = locationPath[locationPath.length - 1].trim();
var sectorCodes = {
"MOQ": "soft",
"1PG": "soft",
"ONT": "heal",
"1ST": "heal",
"T3D": "food",
"TGP": "real",
"TIX": "real",
"TDO": "ener",
"DDD": "mate",
"3PL": "cons",
"4DS": "semi"
};
setTimeout(function () {
googletag.cmd.push(function () {
googletag.defineSlot('/76291182/ASX_leaderboard_com_info', [728, 90], 'div-gpt-ad-1450158832871-0').addService(googletag.pubads());
googletag.defineSlot('/76291182/ASX_MREC_com_info', [[300, 250], [300, 600]], 'div-gpt-ad-1450158832871-1').addService(googletag.pubads());
googletag.defineSlot('/76291182/ASX_MREC_lower_com_info', [300, 250], 'div-gpt-ad-1450158832871-2').addService(googletag.pubads());
googletag.defineSlot('/76291182/ASX_skyscraper_com_info', [160, 600], 'div-gpt-ad-1450158832871-3').addService(googletag.pubads());
googletag.defineSlot('/76291182/ASX_half_page_com_info', [300, 600], 'div-gpt-ad-1450158832871-4').addService(googletag.pubads());
googletag.pubads().setTargeting("cc", companyCode);
if (typeof sectorCodes[companyCode] != 'undefined') {
googletag.pubads().setTargeting('sec', sectorCodes[companyCode]);
}
googletag.enableServices();
});
}, 2000);
This script seems to do a lot more than just contain the codes for the companies but its the only JS script I can find that has the company codes. I believe the data I want is from this script:
var currentURL = (document.URL);
var part = currentURL.split("/")[6];
// var dwsDTM = $('#company-code-title').text();
var digitalData = {
"page": {
"pageInfo": {
"pageID": "3345",
"pageName": "Company info " + part,
"pageURL": window.location.href,
"issueDate": "n/a",
"updatedDate": "n/a",
"brand": "ASX",
"generator": "OpenText",
"domain": "Website",
"sysEnv": "",
"delayType": "Normal"
},
"category": {
"primaryCategory": "Prices and research",
"subCategory1": "Company information",
"subCategory2": "Company info " + part,
"subCategory3": "",
"pageType": ""
},
"productInfo": {}
},
"user": {
"profileInfo": {
"memberB2B": "",
"businessMemberID": "",
"memberRetail": "",
"retailMemberID": ""
},
"version": "1.0",
"events": [],
"vendor": {
"GoogleAnalytics": {
"account": "UA-9950793-3",
"eventCategory": ""
}
}
}
};
I believe its generated to this HTML:
<div class="view-content" ui-view></div>
Im new to scraping dynamic content and this looks so hard to do. Could someone point me in the right direction to retrieve this data?
Thanks
UPDATE: So after a few hours of playing on the site I figured out that they use angularJS for their data call backs and upon further playing around I found the links they use to store their data. They have an API but I dont think its publicly available. In any case I think I can write a simple DOM Script to retrieve and format the data. Will keep you all posted
I figured out a solution. Utilising their API and using HTML DOM and PHP I was able to retrieve the data I wanted and then output the data to CSV. I cant discuss my code or the API because it would be in violation of their terms and service.

FormatSelection in select2Option is removing data

FormatSelection in select2Option removing data.
I am receiving my data in
$scope.superclasses = superclassDataList.data;
where superclassDataList is coming from service in angular.
Data i received from service is :
{
"data": [{
"name": "new Test",
"id": 4506898162253824,
"attendanceAllowed": true,
"subclasses": [{
"title": "HIN",
"children": null,
"entityName": "MyClass",
"entityId": 5136918324969472
},
{
"title": "ENG 101 A",
"children": null,
"entityName": "MyClass",
"entityId": 5699868278390784
}]
}
],
"success": true,
"errorMessage": ""
}
Code where i am applying my ng-grid to show this data:
<div ng-show="superclasses[row.rowIndex].edit"><div id="subclasses" ng-model="superclasses[row.rowIndex].subclasses" ui-select2="select2Options" data-placeholder="Add Subclasses" style="width:100%" multiple></div></div>
<div class="ngCellText" ng-class="col.colIndex()" style="display:inline" ng-show="!superclasses[row.rowIndex].edit" ng-repeat="subclass in superclasses[row.rowIndex].subclasses">{{subclass.title}} ,</div>
(I added one extra field "edit" in superclasses so don't be confuse with that. If it's true first div(Editable mode) will be visible else second(View mode))
Code for select2 i write is:
$scope.subclassNameFormat="";
$scope.select2Options = {
allowClear : true,
multiple: true,
width : 550,
minimumInputLength: 3,
query: function (query){
SuperclassService.getSubclassesUnassigned({searchTerm: query.term.toUpperCase()}, function(response) {
$scope.classesList = response.data;
var data = {
results: []
};
$.each($scope.classesList, function(){
if(this.list === undefined || this.list.length === 0) {
data.results.push({id: this.id, text: this.title,isApplied: false});
}
});
query.callback(data);
}, function(error){
console.log("Superclass is not deleted.... Please try again");
});
},
formatSelection: function format(state) {
if((state.title === undefined || state.title === "") && (state.text !== undefined && state.text !== "")){
$scope.subclassNameFormat = state.text;
}else if((state.text === undefined || state.text === "") && (state.title !== undefined && state.title !== "") ){
$scope.subclassNameFormat = state.title;
}
}
};
here getSubclassesUnassigned() method retrieve data from server on the basis of 3 character i entered to search: (minimumInputLength: 3),
Question: The data in $scope.superclasses comes from server is complete(JSON Data written above). And for a moment complete data of subclasses visible(when edit is false) (in this case name of subclasses HIN, ENG 101 A). Once it entered in "formatSelection" part of "$scope.select2Options" one data from "subclasses" array will be remove and it reflect on the "subclasses" column in grid (the code i write above) and show only one name (either "HIN" or "ENG 101 A"). I don't know why it get entered in "formatSelection" part of "select2options" because till data time "edit" field was false. (See in div code ng-show="!superclasses[row.rowIndex].edit" ). I don't know how it reflect the data. and even delete the data completely(2nd object of subclasses array.).
Have a same problem when value of div is in editable mode(ng-show="superclasses[row.rowIndex].edit") it only show one value of subclasses array.
data after passing control from FormatSelection:
{
"data": [{
"name": "new Test",
"id": 4506898162253824,
"attendanceAllowed": true,
"subclasses": [{
"title": "HIN",
"children": null,
"entityName": "MyClass",
"entityId": 5136918324969472
}]
}],
"success": true,
"errorMessage": ""
}
I tried everything from reading complete doc. about query and formatSelection from select2 but didn't find or understand anything, and also search on stackoverflow but didn't find any relevant link or didn't understand from those already on site. I know it might be silly question for some professionals but i started working on angular just 2 days ago.
Ask me in more explanation is required. I will try to provide everything that i know.
Thanks in advance.
PS: Please ignore My grammatical mistakes.
Try this code before "query :" in select2Option
initSelection: function(element, callback) {},
It will initialize your data for select2 which you are receiving in $scope.superclasses. It is working fine for me.

display json data using xhrget (DOJO)

I am unable to figure out what is the problem with displaying json data..below is the code
var xhrGet1 = dojo.xhrGet({
url: "Page/",
handleAs: "json",
handle: function(response)
{
dojo.byId('json-data').innerHTML = response.questions[0];
}
});
Html
<div id='json-data'></div>
And my json file looks like this
{
"Info": {
"PURPOSE": ".... ",
},
"questions": [
{
"ID": 1,
"Question": "User ID",
"Information": "",
}, {
"ID": 2,
"Question": "Name",
"Information": "",
}
],
so on...any ideas??
The property handleAs : "json" in your xhr call makes the incoming json automatically eval'ed to javascript objects. So, you have to convert your javascript object back to string using JSON.stringify.
e.g. :
dojo.byId('json-data').innerHTML = JSON.stringify(response.questions[0]);
You can also use dojo.toJson for the same purpose. It uses json.stringify but has the benefit of having a second argument ("prettyprint"), allowing you to pretty-print out of the box, like this :
dojo.byId('json-data').innerHTML = dojo.toJson(response.questions[0], true);
wrap your JSON with PRE and CODE tags.
So:
dojo.byId('json-data').innerHTML = "<pre>code>" + response.questions[0] + "</code></pre>";
Also see: Display JSON as HTML for some libraries that can help you pretty-format your JSON when rendering in the browser

Categories