Related
I am trying to build a datatable for a webpage that will eventually hold hundreds of thousands of entries. Because pagination is a must-have, I was given certain local API-calls that implemented Laravel's paginate method. As a result, the server's JSON response has the following format:
{
"current_page": 1,
"data": [{...,
}],
"first_page_url": "http:\/\/127.0.0.1:8000\/api\/test_history\/fullObj?page=1",
"from": 1,
"last_page": 134,
"last_page_url": "http:\/\/127.0.0.1:8000\/api\/test_history\/fullObj?page=134",
"links": [{...,
}],
"next_page_url": "http:\/\/127.0.0.1:8000\/api\/test_history\/fullObj?page=2",
"path": "http:\/\/127.0.0.1:8000\/api\/test_history\/fullObj",
"per_page": 15,
"prev_page_url": null,
"to": 15,
"total": 2000
}
QUESTION
How could DataTables' paging feature implement Laravel's or any pagination model?
What changes in the table initialization, or in general, can be made in order for the page buttons to properly call the appropriate batch of entries?
There should be a way to utilize the above model's next_page_url, first_page_url, etc. properties.
Due to a predicted vast amount of entries, calling the entire object is out of the question, so, unless I am mistaken, DataTables' default paging may not do, because it is not a matter of what is rendered in the front end.
ISSUES
Even though the above JSON response contains all the necessary information for a table pagination, it seems to be conflicting with whatever data the datatable is expecting. So, the following issues surfaced within the webpage:
The total number of pages within the pagination section was not showing
Clicking on any page number, or the next/previous buttons within the pagination section loaded the same entries
The searching and sorting features have stopped filtering the table results
After consulting with documentation, I found that the server's JSON response did not follow DataTables standards, and I had to manipulate some of the data. Here follows the jQuery used to initialize the datatable:
$(document).ready(function() {
$('#test_table').DataTable( {
"order": [[ 8, "desc" ]],
"scrollX": true,
"paging": true,
"lengthMenu": [[ 5, 15, 25, 100, -1 ], [ 5, 15, 25, 100, "All" ]],
"pageLength": 15,
"processing": true,
"serverSide": true,
"ajax": function(data, callback, settings) {
$.get("http://127.0.0.1:8000/api/test_history/fullObj?page=1", {
limit: data.length,
offset: data.start
},
function(json) {
callback({
recordsTotal: json.total,
recordsFiltered: json.total,
data: json.data
});
});
},
"columns": [
{ "data": "id" },
{ "data": "uid" },
{ "data": "dev_type.type" },
{ "data": "registers.id" },
{ "data": "measurements.id" },
{ "data": "created_at" },
{ "data": "updated_at" }
]
});
});
Alternatively:
$(document).ready(function() {
$('#test_table').DataTable( {
"order": [[ 8, "desc" ]],
"scrollX": true,
"paging": true,
"lengthMenu": [[ 5, 15, 25, 100, -1 ], [ 5, 15, 25, 100, "All" ]],
"pageLength": 15,
"processing": true,
"serverSide": true,
"ajax": {
"url": "http://127.0.0.1:8000/api/test_history/fullObj?page=1",
"dataSrc": function(json) {
json.recordsTotal = json.total;
json.recordsFiltered = json.total;
return json.data;
}
},
"columns": [
{ "data": "id" },
{ "data": "uid" },
{ "data": "dev_type.type" },
{ "data": "registers.id" },
{ "data": "measurements.id" },
{ "data": "created_at" },
{ "data": "updated_at" }
]
});
});
These response manipulations fixed the issues of the number of pages not showing, and the incorrect number of page buttons. The rest, however, do persist.
METHODS
Apart from scouring the DataTables' documentation and their website's forum, and combing through the internet for possible solutions, I have tried the following:
Attempting to access an HTML class or ID to create a click event, either by adding the attribute or by creating a handler for the event, possibly not getting it right
Iterating across all numbered buttons, through their DataTables-specific attributes, to dynamically load new entries on click
I have yet to stumble upon a groundbreaking answer, or think of one. Despite these shortcomings, I do believe that the answer is usually simpler than any complex thinking, and in my case it could be related to the data the table is expecting from the server; the JSON's format, or its properties.
Any suggestion would be greatly appreciated.
This question already has answers here:
Decoding generic JSON objects to one of many formats
(1 answer)
How to parse a complicated JSON with Go unmarshal?
(3 answers)
golang | unmarshalling arbitrary data
(2 answers)
How to parse JSON in golang without unmarshaling twice
(3 answers)
Is it possible to partially decode and update JSON? (go)
(2 answers)
Closed 10 months ago.
Every time I resolve one issue I get into another similar but different.
I need to convert into struts below JSON, but some parts are dynamic. and I am not very experienced with this conversions and I get very confused.
Below I have two fields that are different not static ( I was able with the help of this forum resolve a similar issue with one dynamic entry, but now I have two).
the fields I called them "This string changes" so is less confusing.
[null,null,"hub:zWXKROOM","presence_state",{"74ce1906-af89-48a9-aec7-501369509000":{"metas":[{"context":{"embed":false,"mobile":false},"permissions":{"close_hub":false,"embed_hub":false,"fly":true,"join_hub":true,"kick_users":false,"mute_users":false,"pin_objects":false,"spawn_and_move_media":true,"spawn_camera":true,"spawn_drawing":false,"spawn_emoji":true,"update_hub":false,"update_hub_promotion":false,"update_roles":false},"phx_ref":"tGJf9IxredI=","phx_ref_prev":"zJ3pFzeYafM=","presence":"room","profile":{"avatarId":"3IADk9x","displayName":"real changeling"},"roles":{"creator":false,"owner":false,"signed_in":false}}]},"774e91d5-a324-47d7-ba75-edf9ed5bbe1a":{"metas":[{"context":{"embed":false,"mobile":false},"permissions":{"close_hub":false,"embed_hub":false,"fly":true,"join_hub":true,"kick_users":false,"mute_users":false,"pin_objects":false,"spawn_and_move_media":true,"spawn_camera":true,"spawn_drawing":false,"spawn_emoji":true,"update_hub":false,"update_hub_promotion":false,"update_roles":false},"phx_ref":"NnAT0YpIaUg=","phx_ref_prev":"tzv+xV6h0Rs=","presence":"room","profile":{"avatarId":"PcJ8Sxb","displayName":"GoBotWebSockets"},"roles":{"creator":false,"owner":false,"signed_in":false}}]},"9bd22f70-521a-49c2-9cb9-ac58dabfa1d6":{"metas":[{"context":{"embed":false,"mobile":false},"permissions":{"close_hub":false,"embed_hub":false,"fly":true,"join_hub":true,"kick_users":false,"mute_users":false,"pin_objects":false,"spawn_and_move_media":true,"spawn_camera":true,"spawn_drawing":false,"spawn_emoji":true,"update_hub":false,"update_hub_promotion":false,"update_roles":false},"phx_ref":"kPknFXlNkMo=","phx_ref_prev":"IA2Es263VdA=","presence":"room","profile":{"avatarId":"3IADk9x","displayName":"killab33z"},"roles":{"creator":false,"owner":false,"signed_in":false}}]},"f87b718a-c873-40a9-99db-91b4d0f7f4de":{"metas":[{"context":{"embed":false,"mobile":false},"permissions":{"close_hub":true,"embed_hub":true,"fly":true,"join_hub":true,"kick_users":true,"mute_users":true,"pin_objects":true,"spawn_and_move_media":true,"spawn_camera":true,"spawn_drawing":true,"spawn_emoji":true,"update_hub":true,"update_hub_promotion":false,"update_roles":true},"phx_ref":"XCCt44iesAo=","presence":"lobby","profile":{"avatarId":"https://s3.amazonaws.com/readyplayerbaker/avatars_baked/89e86e1a-43c7-4520-8f91-9a94ed42a722.glb","displayName":"ReK2"},"roles":{"creator":true,"owner":true,"signed_in":true}}]}}]
with a lot of help of someone here I was able to convert a very similar one but with two I cant seem to get it to work. I keep getting empty results..
the similar approach is Here
I have tried replicating with a field above and other similar things.
I have look many blogs for this situation, no luck.
I also have try this tools, but is not really working because the tool does not know the details
edit: here is from json lint:
[
null,
null,
"hub:zWXKROOM",
"presence_state",
{
"74ce1906-af89-48a9-aec7-501369509000": {
"metas": [
{
"context": {
"embed": false,
"mobile": false
},
"permissions": {
"close_hub": false,
"embed_hub": false,
"fly": true,
"join_hub": true,
"kick_users": false,
"mute_users": false,
"pin_objects": false,
"spawn_and_move_media": true,
"spawn_camera": true,
"spawn_drawing": false,
"spawn_emoji": true,
"update_hub": false,
"update_hub_promotion": false,
"update_roles": false
},
"phx_ref": "tGJf9IxredI=",
"phx_ref_prev": "zJ3pFzeYafM=",
"presence": "room",
"profile": {
"avatarId": "3IADk9x",
"displayName": "real changeling"
},
"roles": {
"creator": false,
"owner": false,
"signed_in": false
}
}
]
},
"774e91d5-a324-47d7-ba75-edf9ed5bbe1a": {
"metas": [
{
"context": {
"embed": false,
"mobile": false
},
"permissions": {
"close_hub": false,
"embed_hub": false,
"fly": true,
"join_hub": true,
"kick_users": false,
"mute_users": false,
"pin_objects": false,
"spawn_and_move_media": true,
"spawn_camera": true,
"spawn_drawing": false,
"spawn_emoji": true,
"update_hub": false,
"update_hub_promotion": false,
"update_roles": false
},
"phx_ref": "NnAT0YpIaUg=",
"phx_ref_prev": "tzv+xV6h0Rs=",
"presence": "room",
"profile": {
"avatarId": "PcJ8Sxb",
"displayName": "GoBotWebSockets"
},
"roles": {
"creator": false,
"owner": false,
"signed_in": false
}
}
]
},
"9bd22f70-521a-49c2-9cb9-ac58dabfa1d6": {
"metas": [
{
"context": {
"embed": false,
"mobile": false
},
"permissions": {
"close_hub": false,
"embed_hub": false,
"fly": true,
"join_hub": true,
"kick_users": false,
"mute_users": false,
"pin_objects": false,
"spawn_and_move_media": true,
"spawn_camera": true,
"spawn_drawing": false,
"spawn_emoji": true,
"update_hub": false,
"update_hub_promotion": false,
"update_roles": false
},
"phx_ref": "kPknFXlNkMo=",
"phx_ref_prev": "IA2Es263VdA=",
"presence": "room",
"profile": {
"avatarId": "3IADk9x",
"displayName": "killab33z"
},
"roles": {
"creator": false,
"owner": false,
"signed_in": false
}
}
]
},
"f87b718a-c873-40a9-99db-91b4d0f7f4de": {
"metas": [
{
"context": {
"embed": false,
"mobile": false
},
"permissions": {
"close_hub": true,
"embed_hub": true,
"fly": true,
"join_hub": true,
"kick_users": true,
"mute_users": true,
"pin_objects": true,
"spawn_and_move_media": true,
"spawn_camera": true,
"spawn_drawing": true,
"spawn_emoji": true,
"update_hub": true,
"update_hub_promotion": false,
"update_roles": true
},
"phx_ref": "XCCt44iesAo=",
"presence": "lobby",
"profile": {
"avatarId": "https://s3.amazonaws.com/readyplayerbaker/avatars_baked/89e86e1a-43c7-4520-8f91-9a94ed42a722.glb",
"displayName": "ReK2"
},
"roles": {
"creator": true,
"owner": true,
"signed_in": true
}
}
]
}
}
]
[edit2]
I did a lot of multiple tries but still is not printing anything at all!
is like there is no data but there is data... can someone please check my code and see what im I doing wrong? this last one I did step by step with a tutorial, still is not even showing any data, I wish it did so at least I know what to change..
https://gitlab.com/rek2/gohubsbot/-/blob/master/websocketsListen.go
thanks
ok after a lot of debugging, reading, reading, hitting my head and stripping json to make it simples to post on json to go tools... I finally got it..
the main issue?
//the type needs to be a map itself
type PresenceState map[string]State
Also:
// even do I did try this above I never called it the right way before so was giving up and moving on... but I have to use a pointer
for k, o := range *v {}
is working now. I am getting the keys and objets when there is a presence state at login or change so I can map id to usernames
I tried to use jqGrid formatter: "actions" for remote json url but it shifts rows because number of column names and actual returned data doesn't match (act column is extra one in column names). I did search online and it looks like all examples are for local data (on page) where json is used as key/value, while url:somepage.php returns a csv kind-of-format of columns(no keys, just values). Also I use id as hidden field, while all examples show id. I use one more hidden column as well.
here is my colmodel:
url: "manager_json",
editurl: "manager_edit",
datatype: "json",
//data: mydata,
width:1000,
//jsonReader: {
// repeatitems : false,
// },
colNames: ["","Id","Uid","Custom Id","Image Name","Coord. X","Coord. Y","Gender","Progress","Status","Created","Updated"],
colModel: [{"name":"act","template":"actions","formatoptions":{"editformbutton":true}},{"name":"id","align":"center","width":33,"editable":false,"hidden":true},{"name":"uid","align":"center","width":33,"editable":true,"hidden":true,"editrules":{"edithidden":false,"required":false}},{"name":"ta_id","align":"center","width":100,"editrules":{"required":true}},{"name":"image","width":150,"template":"text","editrules":{"required":true}},{"name":"x","width":100,"align":"center","template":"integer","editrules":{"required":true}},{"name":"y","width":100,"align":"center","template":"integer","editrules":{"required":true}},{"name":"gender","width":100,"align":"center","formatter":"select","stype":"select","editrules":{"required":true},"edittype":"select","editoptions":{"value":"f:Female;m:Male","defaultValue":"m"},"searchoptions":{"sopt":["eq","ne"],"value":":Any;f:Female;m:Male"}},{"name":"progress","width":120,"align":"center","formatter":"select","stype":"select","editrules":{"required":true},"editable":false,"edittype":"select","editoptions":{"value":"-:New;pf:Process Failed;ps:Process Scheduled;pss:Process Success;p:Processing...;s:Staging;tf:Test Failed;ts:Test Scheduled;tss:Test Success;t:Testing...","defaultValue":"m"},"searchoptions":{"sopt":["eq","ne"],"value":":Any;-:New;pf:Process Failed;ps:Process Scheduled;pss:Process Success;p:Processing...;s:Staging;tf:Test Failed;ts:Test Scheduled;tss:Test Success;t:Testing..."}},{"name":"status","width":100,"align":"center","formatter":"select","stype":"select","edittype":"select","editoptions":{"value":"a:Active;n:New","defaultValue":"m"},"searchoptions":{"sopt":["eq","ne"],"value":":Any;a:Active;n:New"}},{"name":"date_created","width":150,"template":"text","editable":false},{"name":"last_updated","width":150,"template":"text","editable":false}]
And here is my actual data from my server (db) as per jqgrid specification:
{"page":1,"total":1,"records":7,"rows":[{"id":32,"cell":[32,"889daf31ff3e49544f52850258439600","2uu","2ok",2,2,"m","-","a","2017-02-10 18:57:05","2017-02-10 23:37:12"]},{"id":30,"cell":[30,"","11","11",1,1,"m","-","a","2017-02-10 18:01:52","2017-02-10 18:01:52"]},{"id":29,"cell":[29,"aaa","ww222111uu","11",1,1,"m","-","a","2017-02-10 18:00:36","2017-02-10 23:37:08"]},{"id":27,"cell":[27,"","11","1",1,1,"m","-","a","2017-02-10 17:57:41","2017-02-10 17:57:41"]},{"id":25,"cell":[25,"","4tt","4img",4,4,"f","-","n","2017-02-10 17:50:21","2017-02-11 00:26:03"]},{"id":24,"cell":[24,"","1","1",1,1,"m","-","a","2017-02-10 17:49:38","2017-02-10 17:49:38"]},{"id":22,"cell":[22,"","bbb","imam 222",2,22,"f","p","n","2017-02-08 20:14:55","2017-02-10 13:27:57"]}]}
As you can see cell row has less columns than colNames and colModel. Also id and uid columns are hidden. I added on extra fake column from db, but it did not help
i am using jqGrid 4.13.7-pre
I'd recommend you to return objects like
{
"id": 32,
"uid": "889daf31ff3e49544f52850258439600",
"ta_id": "2uu",
"image": "2ok",
"x": 2,
"y": 2,
"gender": "m",
"progress": "-",
"status": "a",
"date_created": "2017-02-10 18:57:05",
"last_updated": "2017-02-10 23:37:12"
}
instead of
{
"id": 32,
"cell": [
32, "889daf31ff3e49544f52850258439600", "2uu", "2ok", 2, 2, "m", "-", "a",
"2017-02-10 18:57:05", "2017-02-10 23:37:12"
]
}
as the server response. It will simplify your code.
If you do need to process the current format of the data, then you will have to force repeatitems: false mode by usage the option
jsonReader: {
repeatitems: false
}
and to use jsonmap property of colModel to inform jqGrid from which element of the item one should read the column data. The jsonmap could be either in the string form like
jsonmap: "cell.1"
or in the function form:
jsonmap: function (item) {
return item.cell[1];
}
To make the code better maintainable you can define an object like
var columnOrder = {
id: 0,
uid: 1,
ta_id: 2,
image: 3,
x: 4,
y: 5,
gender: 6,
progress: 7,
status: 8,
date_created: 9,
last_updated: 10
};
which provides the index in cell array by the column name and to use jsonmap like
jsonmap: function (item) {
return item.cell[columnOrder.uid];
}
The demo https://jsfiddle.net/OlegKi/ozzgnaeh/2/ demonstrates the approach.
How can i populate caption of the table with the hospitallName & Date supplied in the json data?
** expected output is added here **
Json :
{
"sEcho":2,
"iTotalRecords":243,
"iTotalDisplayRecords":243,
"aaData":[
[
"Mark Zuckerberg",
"USA",
"Feb 14, 1943"
],
[
"John Mathew",
"UK",
"Feb 14, 1943"
],
[
"John Mathew",
"USA",
"Feb 14, 1943"
]
],
"Date":"Aug 01, 2016 - Aug 05, 2016",
"hospitallName":"Apollo Hospital Center"
}
--
on my server side,i am calling like this,
$(document).ready(function() {
oTable = $('#report').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bServerSide": true,
"bProcessing":true,
"bFilter":true,
"oLanguage": {
"sProcessing": "Please wait..."
},
"sAjaxSource": "myDataTableAction.action",
"aaSorting": [],
});
$('td.options span').hide();
$('<caption/>').html('<h2 style="text-align: center;background-color:#f9b660 !important ; line-height: 45px;">Have to show hosital Name & Date here</h2>').appendTo( '#report' );
});
You can use ajax instead of sAjaxSource and use the dataSrc callback to populate the headers. You are not giving any example of layout or markup, but if you give the relevant headers an id you can do the following :
ajax: {
url: 'myDataTableAction.action',
dataSrc: function(json) {
$('#date_head').text(json.Date)
$('#hospitalName_head').text(json.hospitallName)
return json.aaData
}
}
see demo -> http://jsfiddle.net/zvqdpeky/
I am new to jqgrid and am trying to use json to load the data. I have tried to use the jqgrid demos as a base and then build from there. The json data looks good, but I can't get anything loaded into the grid. Any ideas? I was hoping the use of loaderror or loadcomplete would at least give me insight, but I am not able to retrieve any message why the grid won't load.
json data:
{
"page": "1",
"total": 1,
"records": "12",
"rows": [
[
"67",
"3 - Sandbox: Appointment Set"
],
[
"68",
"1 - Sandbox: Email requested"
],
[
"69",
"2 - Sandbox: Questions not answered"
],
[
"74",
"1 - TenPointSix: Email requested for more information"
],
[
"75",
"2 - TenPointSix: Registered for webinar2"
],
[
"76",
"3 - TenPointSix: Webinar registration confirmed"
],
[
"93",
"5-Test Entry"
],
[
"94",
"test3"
],
[
"95",
"test2"
],
[
"97",
"Jeff"
],
[
"103",
"sortorder"
],
[
"106",
"reload"
]
]
}
My grid code:
<table id="jsonmap"></table>
<div id="pjmap"></div>
<script language="JavaScript" type="text/javascript">
jQuery("#jsonmap").jqGrid({
url:'sampleLoad.php?client=<?=$clientId5?>',
datatype: "json",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
colNames:['Inv No','Name'],
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:100}
],
rowNum:15,
rowList:[15,30,45],
pager: '#pjmap',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
jsonReader: {
root: "Rows",
cell: "",
page: "Page",
total: "Total",
records: "Records",
repeatitems: false,
id: "0"
},
loadComplete: function() {
alert("Load Complete");
},
loadError: function(xhr,st,err) { $("#jsonmapMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText); },
caption: "JSON Mapping",
width: '900',
height: '300'
});
jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:false,del:false});
Any help would be appreciated.
Thanks,
Jeff
The problem is the wrong jsonReader which you use. For example you use rows in the JSON data, but use root: "Rows". The format of the data corresponds default repeatitems: true property, but you used repeatitems: false and so on.
The correct jsonReader is
jsonReader: {
cell: "",
id: "0"
}
Additionally I would recommend you to add gridview: true and use height: 'auto' instead of height: '300' which simplify the setting of height.
The demo shows the modifications.