Related
Tabulator doesn't accept bottomCalcFormatter in column definition
My Tabulator table works pretty well and I can successfully add bottomCalc and formatter, but I can't seem to add bottomCalcFormatter. so I have a column of money with formatter:"money" and a bottomCalc:"sum" but the sum is not formatted as money. If I try to add bottomCalcFormatter:"money" the table doesn't render.
This renders although the sum is not in a "money" format:
columns:[
{title:0, titleFormatter:closeButton},
{title:"Revision#", field:"revNum", sorter:"number", align:"center", formatter:revisionDoc, formatterParams:{urlField:"hyperlink"}},
{formatter:pdfIcon, align:"center", formatterParams:{urlField:"hyperlink"}},
{title:"TO Amount", field:"toAmount", sorter:"number", formatter:"money", align:"right", bottomCalc:"sum"},
{title:"Adjusted", field:"adjusted", align:"right", formatter:"money", bottomCalc:"sum"},
],
This table does not render at all:
columns:[
{title:0, titleFormatter:closeButton},
{title:"Revision#", field:"revNum", sorter:"number", align:"center", formatter:revisionDoc, formatterParams:{urlField:"hyperlink"}},
{formatter:pdfIcon, align:"center", formatterParams:{urlField:"hyperlink"}},
{title:"TO Amount", field:"toAmount", sorter:"number", formatter:"money", align:"right", bottomCalc:"sum"},
{title:"Adjusted", field:"adjusted", align:"right", formatter:"money", bottomCalc:"sum", bottomCalcFormatter:"money"},
],
I just checked the Tabulator.js there is an additional parameter
bottomCalcFormatterParams
Check this code it sums currency and the calculation shows $ sign
<!DOCTYPE html>
<html lang="en">
<head><link href="https://unpkg.com/tabulator-tables#4.2.4/dist/css/tabulator.min.css" rel="stylesheet"></head>
<body>
<div id="example-table"></div>
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.2.4/dist/js/tabulator.min.js"></script>
<script>
const tabledata = [
{id: 1, name: "Oli Bob", money: "12", col: "red", dob: ""},
{id: 2, name: "Mary May", money: "1", col: "blue", dob: "14/05/1982"},
{id: 3, name: "Christine Lobowski", money: "42", col: "green", dob: "22/05/1982"},
{id: 4, name: "Brendon Philips", money: "125", col: "orange", dob: "01/08/1980"},
{id: 5, name: "Margret Marmajuke", money: "16", col: "yellow", dob: "31/01/1999"},
];
const table = new Tabulator("#example-table", {
height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ //Define Table Columns
{title: "Name", field: "name", width: 150},
{
title: "money",
field: "money",
align: "left",
formatter: "money",
bottomCalc: "sum",
bottomCalcParams: {
precision: 3
},
bottomCalcFormatter: "money",
bottomCalcFormatterParams: {
decimal: ".",
thousand: ",",
symbol: "$"
},
formatterParams: {
decimal: ".",
thousand: ",",
symbol: "$"
}
},
{title: "Favourite Color", field: "col"},
{title: "Date Of Birth", field: "dob", sorter: "date", align: "center"},
]
});
</script>
</body>
</html>
Hi i have the following table to generate a json dataset
it has the following data i have script teh table
USE [GridSamples]
GO
/****** Object: Table [dbo].[SalesStats] Script Date: 12/13/2016 07:34:51 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[SalesStats](
[id] [int] IDENTITY(1,1) NOT NULL,
[makes] [nchar](10) NOT NULL,
[models] [nchar](10) NOT NULL,
[fuelusagecity] [nchar](10) NOT NULL,
[fuelusagehwy] [nchar](10) NOT NULL,
[salesaboveavg] [bit] NOT NULL,
[totalnumofsales] [money] NOT NULL,
[highsalestext] [varchar](50) NULL,
[saledate] [date] NOT NULL,
CONSTRAINT [PK_SalesStats] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[SalesStats] ON
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (1, N'toyota ', N'corolla ', N'17 ', N'12 ', 0, 120000.0000, NULL, CAST(0x9A330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (2, N'toyota ', N'corolla ', N'10 ', N'14 ', 0, 100000.0000, N'HIGH', CAST(0xA8330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (3, N'toyota ', N'belta ', N'15 ', N'10 ', 1, 200000.0000, NULL, CAST(0xC2330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (4, N'toyota ', N'camry ', N'13 ', N'10 ', 0, 300000.0000, N'HIGH', CAST(0x29340B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (5, N'nissan ', N'skyline ', N'14 ', N'9 ', 1, 500000.0000, N'HIGH', CAST(0x48330B00 AS Date))
GO
INSERT [dbo].[SalesStats] ([id], [makes], [models], [fuelusagecity], [fuelusagehwy], [salesaboveavg], [totalnumofsales], [highsalestext], [saledate]) VALUES (6, N'nissan ', N'zx300 ', N'10 ', N'8 ', 0, 400000.0000, NULL, CAST(0x2B350B00 AS Date))
GO
SET IDENTITY_INSERT [dbo].[SalesStats] OFF
GO
In my middle tier ASP MVC the controller converts this to the the following json (UPADATED TO HAVE A STRING SalesDate)
var data = [{"id":1,"make":"toyota","model":"corolla","fuelusagecity":"17","fuelusagehwy":"12","salesaboveavg":false,"totalnumberofsales":120000.0000,"highsalestext":null,"salesdate":"2010-12-01"},{"id":2,"make":"toyota","model":"corolla","fuelusagecity":"10","fuelusagehwy":"14","salesaboveavg":false,"totalnumberofsales":100000.0000,"highsalestext":"HIGH","salesdate":"2010-12-15"},{"id":3,"make":"toyota","model":"belta","fuelusagecity":"15","fuelusagehwy":"10","salesaboveavg":true,"totalnumberofsales":200000.0000,"highsalestext":null,"salesdate":"2011-01-10"},{"id":4,"make":"toyota","model":"camry","fuelusagecity":"13","fuelusagehwy":"10","salesaboveavg":false,"totalnumberofsales":300000.0000,"highsalestext":"HIGH","salesdate":"2011-04-23"},{"id":5,"make":"nissan","model":"skyline","fuelusagecity":"14","fuelusagehwy":"9","salesaboveavg":true,"totalnumberofsales":500000.0000,"highsalestext":"HIGH","salesdate":"2010-09-10"},{"id":6,"make":"nissan","model":"zx300","fuelusagecity":"10","fuelusagehwy":"8","salesaboveavg":false,"totalnumberofsales":400000.0000,"highsalestext":null,"salesdate":"2012-01-06"}];
i have used the following code to generate the grid using JqGrid free-grid. for easiness i have added the above json array to the data array
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/south-street/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/free-jqgrid/4.13.5/css/ui.jqgrid.min.css" />
</head>
<body>
<table id="list483"></table>
<div id=""></div>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/free-jqgrid/4.13.5/js/i18n/grid.locale-de.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
<script>
var data = [{"id":1,"make":"toyota","model":"corolla","fuelusagecity":"17","fuelusagehwy":"12","salesaboveavg":false,"totalnumberofsales":120000.0000,"highsalestext":null,"salesdate":"2010-12-01"},{"id":2,"make":"toyota","model":"corolla","fuelusagecity":"10","fuelusagehwy":"14","salesaboveavg":false,"totalnumberofsales":100000.0000,"highsalestext":"HIGH","salesdate":"2010-12-15"},{"id":3,"make":"toyota","model":"belta","fuelusagecity":"15","fuelusagehwy":"10","salesaboveavg":true,"totalnumberofsales":200000.0000,"highsalestext":null,"salesdate":"2011-01-10"},{"id":4,"make":"toyota","model":"camry","fuelusagecity":"13","fuelusagehwy":"10","salesaboveavg":false,"totalnumberofsales":300000.0000,"highsalestext":"HIGH","salesdate":"2011-04-23"},{"id":5,"make":"nissan","model":"skyline","fuelusagecity":"14","fuelusagehwy":"9","salesaboveavg":true,"totalnumberofsales":500000.0000,"highsalestext":"HIGH","salesdate":"2010-09-10"},{"id":6,"make":"nissan","model":"zx300","fuelusagecity":"10","fuelusagehwy":"8","salesaboveavg":false,"totalnumberofsales":400000.0000,"highsalestext":null,"salesdate":"2012-01-06"}];
$("#list483").jqGrid("jqPivot",
data,
{
frozenStaticCols: true,
xDimension: [
{/*x0*/ dataName: "make", width: 200, label: "Make" },
{/*x1*/ dataName: "model", skipGrouping: true },
{/*x2*/ dataName: "fuelusagecity", hidden: true, skipGrouping: true },
{/*x3*/ dataName: "fuelusagehwy", width: 80, align: "center",
label: "fuel consumption", skipGrouping: true,
formatter: function (cellvalue, options, rowObject) {
return rowObject.x2 === null || rowObject.x3 === null ?
"-" :
String(rowObject.x2) + "-" + String(cellvalue);
}
},
{/*x4*/ dataName: "salesaboveavg", hidden: true, width: 50, align: "center", skipGrouping: true },
{/*x5*/ dataName: "highsalestext", hidden: true, skipGrouping: true }
],
yDimension: [
{/*y0*/ dataName: "salesdate",
sorttype: "date",
formatter: function (cellvalue, options, rowObject) {
//var x = rawObject.y0;
console.log(rowObject);
// return rowObject;
}
}],
aggregates: [{
member: "totalnumberofsales",
aggregator: "max"
}]
},
// grid options
{
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true, width: 90 },
shrinkToFit: false,
useUnformattedDataForCellAttr: false,
autoResizing: { compact: true },
groupingView: {
groupField: ["x0"],
groupColumnShow: [false],
groupText: ['<b>{0}</b>']
},
width: 450,
pager: true,
rowNum: 20,
rowList: [5, 10, 20, 100, "10000:All"],
caption: "<b>Car sales statistics</b>"
}
);
</script>
</body>
</html>
the generated grid is shown below image link
i have so many questions relating to this grid. but i will post them one by one as answers progresses. But for now the following questions to start off with:
when i turned on teh grouping what happened to teh collapse icon image that should appear behind the group name? SOLVED: i have found the answer to this question, the missing font-awesome library caused the issue
How do i convert the json dates in teh dates columns and display them in actual dates?SOLVED:This issue was solved once i made the conversion in the middle tier to return saledate a string value
The Grid has two entries on the Toyota Corolla but this should be one entry and in that entry, totalnumofsales values should be placed on the two matching dates. AKA in a single row entry to toyota corolla 120000 in 2010-12-01 cell and 100000 in 2010-12-15
also teh fuel consuption value must be the first row value i.e. 10-14
for the cell that don't have values shows 0.00 instead of showing 0.00 i need them to display an empty cell
How do i turn off the automatic sorting of the grid becuase when grid is generated the groups names are sorted in the alphabetical order but i dont wont grid to sort them, instead keep their original order that comes from the backend
how do i acheive the above?
I think origin of your question are some common misunderstanding what is pivot table and how one can use it. I try to explain all below in details on an example of your input data.
You use the following input data:
[{
"id": 1,
"make": "toyota",
"model": "corolla",
"fuelusagecity": "17",
"fuelusagehwy": "12",
"salesaboveavg": false,
"totalnumberofsales": 120000.0000,
"highsalestext": null,
"salesdate": "2010-12-01"
}, {
"id": 2,
"make": "toyota",
"model": "corolla",
"fuelusagecity": "10",
"fuelusagehwy": "14",
"salesaboveavg": false,
"totalnumberofsales": 100000.0000,
"highsalestext": "HIGH",
"salesdate": "2010-12-15"
}, {
"id": 3,
"make": "toyota",
"model": "belta",
"fuelusagecity": "15",
"fuelusagehwy": "10",
"salesaboveavg": true,
"totalnumberofsales": 200000.0000,
"highsalestext": null,
"salesdate": "2011-01-10"
}, {
"id": 4,
"make": "toyota",
"model": "camry",
"fuelusagecity": "13",
"fuelusagehwy": "10",
"salesaboveavg": false,
"totalnumberofsales": 300000.0000,
"highsalestext": "HIGH",
"salesdate": "2011-04-23"
}, {
"id": 5,
"make": "nissan",
"model": "skyline",
"fuelusagecity": "14",
"fuelusagehwy": "9",
"salesaboveavg": true,
"totalnumberofsales": 500000.0000,
"highsalestext": "HIGH",
"salesdate": "2010-09-10"
}, {
"id": 6,
"make": "nissan",
"model": "zx300",
"fuelusagecity": "10",
"fuelusagehwy": "8",
"salesaboveavg": false,
"totalnumberofsales": 400000.0000,
"highsalestext": null,
"salesdate": "2012-01-06"
}]
Every item of data have many properties. Some properties contains different (or even unique) values (like id). Other properties should be grouped together and calculate some aggregation function on another properties on every item inside of the group. I explain the above statement on an example.
The input data contains sale information of some car models. It could be interesting, for example, to display the number of sales of every car model by date or by year etc.
Pivot tables contains three main parameters xDimension, yDimension and aggregates. For example, look at the following picture below
The left part (markt in orange) represents xDimension (make and model). It build mostly the rows of the grid. The right part (marked in blue) represents yDimension (year and month of the input items). The lowest level of the information on the right size contains the result of calculation of aggregate functions (max and count) on some input property (it was totalnumberofsales in the example).
If one defined only one aggregate function inside of aggregates parameter, then the name of aggregate function will be not displayed:
Now I have to display what jqPivot do to create jqGrid. First of all it scan all input data by all X and by Y parameters. If you define for example the following pivot model
xDimension: [
{ dataName: "make", width: 100, label: "Make" },
{ dataName: "model", width: 100, label: "Model", align: "center" }
],
yDimension: [
{ dataName: "salesdate", sortorder: "desc" }
],
aggregates: [
{ member: "totalnumberofsales", aggregator: "max" }
]
then all data will be first scanned for the items having the same ["make", "model"] values in xDimension and by ["salesdate"] in yDimension. The input data has 6 elements with the indexes from 0 till 5. The resulting xIndexes and yIndexes contains unique values by x and y and the indexes of source data (from 0 till 5) to the items, which has the data. One can add the following lines after jqPivot call to see the indexes:
var p = $("#list483").jqGrid("getGridParam");
console.log(JSON.stringify(p.pivotOptions.xIndex));
console.log(JSON.stringify(p.pivotOptions.yIndex));
As the result one will see the demo https://jsfiddle.net/oadzsnov/. I include the resulting xIndex and yIndex below. xIndex is
{
"items": [
["toyota", "corolla"],
["toyota", "belta"],
["toyota", "camry"],
["nissan", "skyline"],
["nissan", "zx300"]
],
"indexesOfSourceData": [
[0, 1],
[2],
[3],
[4],
[5]
],
"trimByCollect": true,
"caseSensitive": false,
"skipSort": true,
"fieldLength": 2,
"fieldNames": ["make", "model"],
"fieldSortDirection": [1, 1],
"fieldCompare": [null, null]
}
yIndex is
{
"items": [
["2012-01-06"],
["2011-04-23"],
["2011-01-10"],
["2010-12-15"],
["2010-12-01"],
["2010-09-10"]
],
"indexesOfSourceData": [
[5],
[3],
[2],
[1],
[0],
[4]
],
"trimByCollect": true,
"caseSensitive": false,
"skipSort": false,
"fieldLength": 1,
"fieldNames": ["salesdate"],
"fieldSortDirection": [-1],
"fieldCompare": [null]
}
The xIndex.items build the rows of the resulting pivot table and yIndex build the columns. You can see that the rows will be
["toyota", "corolla"],
["toyota", "belta"],
["toyota", "camry"],
["nissan", "skyline"],
["nissan", "zx300"]
and the columns:
["2012-01-06"],
["2011-04-23"],
["2011-01-10"],
["2010-12-15"],
["2010-12-01"],
["2010-09-10"]
One can see additionally that 2 elements of source data (see xIndex.indexesOfSourceData, which is [0, 1]) xIndex.items corresponds the same x-vector ["toyota", "corolla"]. The content of the pivot table (see yellow marked data on the first picture) will be the result of executing the specified aggregate function. We used
aggregates: [
{ member: "totalnumberofsales", aggregator: "max" }
]
and the source elements with the index 0 and 1 are
[{
...
"make": "toyota",
"model": "corolla",
...
"totalnumberofsales": 120000.0000,
...
"salesdate": "2010-12-01"
}, {
...
"make": "toyota",
"model": "corolla",
...
"totalnumberofsales": 100000.0000,
...
"salesdate": "2010-12-15"
}
The items have different y-vectors ("salesdate": "2010-12-01" for the first item and "salesdate": "2010-12-15" for the second one). Thus the calculation of aggregates will be very simple: 120000 in the column "2010-12-01", 100000 in the column "2010-12-15" and 0 for all other dates, because there are no ["toyota", "corolla"] sales at the day:
If you would assign separate salesYear and salesMonth properties based on the salesdate, then you can use
xDimension: [
{ dataName: "make", width: 100, label: "Make" },
{ dataName: "model", width: 100, label: "Model", align: "center" }
],
yDimension: [
{ dataName: "salesYear", sorttype: "integer" },
{ dataName: "salesMonth", sorttype: "integer" }
],
aggregates: [{
member: "totalnumberofsales",
aggregator: "max"
}]
to create the pivot table. Both first source items has the same salesdate ("2010-12-15" and "2010-12-15"). The calculation of max aggregater over the both items get 120000, which one will see in the resulting grid
see https://jsfiddle.net/fa40onkz/
If you could follow me till the place, then you could understand any from effect, which you could see in the resulting pivot table.
For example, it's wrong to use
{/*x2*/ dataName: "fuelusagecity", hidden: true, skipGrouping: true },
{/*x3*/ dataName: "fuelusagehwy", width: 80, align: "center",
label: "fuel consumption", skipGrouping: true,
formatter: function (cellvalue, options, rowObject) {
return rowObject.x2 === null || rowObject.x3 === null ?
"-" :
String(rowObject.x2) + "-" + String(cellvalue);
}
},
{/*x4*/ dataName: "salesaboveavg", hidden: true, width: 50, align: "center", skipGrouping: true },
{/*x5*/ dataName: "highsalestext", hidden: true, skipGrouping: true }
in option of jqPivot, because two ["toyota", "corolla"] source items have different fuelusagecity, fuelusagehwy and highsalestext values. The salesaboveavg value is the same, but I suppose the usage of salesaboveavg is the same error. You should remove the items from xDimension.
To display empty cell in the cells with 0 value you can define column template
var myIntTemplate = {
formatter: "currency",
align: "right", sorttype: "number",
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] },
formatoptions: { defaultValue: ""}};
and to use it in aggregates:
aggregates: [{
member: "cellvalue",
template: myIntTemplate,
aggregator: "max"
}]
You will get the results like
like on the demo https://jsfiddle.net/tnr2dgkv/
Your last question was about sorting. Sorting of source items is extremely important to create correct pivot table. You can use skipSortByX: true or/and skipSortByY: true options of jqPivot to suppress sorting of initial data, but the resulting data will be sorted once more if you use grouping (groupField: ["x0"]). I think that the simplest way (but it's still not so simple in the implementation) to hold the order of resulting items would be by defining custom sorting functions for xDimension items. I recommend you to read the wiki article for more information.
I have the following models in my Laravel project
Merchant
Deals
Deal Votes
Deal Clicks
Deal Deal Types
Merchant Rating
This is how my Merchants Model looks like
class Merchants extends Model
{
//
public function deals()
{
return $this->hasMany('App\Deals', 'merchant_id', 'merchant_id');
}
}
Deals Model
class Deals extends Model
{
//
public function clicks()
{
return $this->hasMany('App\Clicks', 'deal_id', 'deal_id');
}
public function merchants()
{
return $this->hasOne('App\Merchants', 'deal_id', 'deal_id');
}
public function votes()
{
return $this->hasMany('App\Deal_votes', 'deal_id', 'deal_id');
}
public function deal_dealtypes()
{
return $this->hasMany('App\Deal_dealtypes', 'deal_id', 'deal_id');
}
}
Merchant Rating Model
public function merchants()
{
return $this->belongsTo('App\Merchants', 'merchant_id', 'merchant_id');
}
For a specific Merchant Landing page, I am trying to get some Merchant info, deals tied to the merchant, count of votes and clicks for each Deal. This is what I have done so far
$merchant = Merchants::where('merchant_url_text', $merchant_url_text)
-> with('categories' ,'deals','deals.votes','deals.clicks', 'deals.deal_dealtypes')
-> first();
This however is returning Merchant Info, Deal Info, All the Votes records tied to the Deal and all the clicks tied to each deal.
Attached sample data response I am getting
{
merchant_id: 6605,
master_merchant_id: null,
skimlinks_id: null,
merchant_name: "Groupon",
network: "cj",
network_id: "",
network_notes: null,
dual_network: null,
related_merchants: null,
affiliate_link: "http://api.coupilia.com/merchants/?aid=1423&mid=6605",
skimlinks_url: null,
fmtcurl: null,
merchant_homepage_url: "www.groupon.com?z=dealpage",
status: null,
selected_status: null,
relationship_status: null,
primary_country: "US",
apofpo: null,
primary_category: null,
subcategories: null,
special_payment_options: null,
mobile_certified: null,
logos: "",
custom_logo: "https://res-5.cloudinary.com/dhhntbusx/image/upload/t_media_lib_thumb/v1475206550/Groupon-coupons_mzjdm8.jpg",
custom_description: null,
added: null,
lastupdated: null,
merchant_url_text: "groupon.com",
about: "",
primary_category_id: "43",
parent_merchant_id: null,
skimlinks_ids: null,
custom_merchant_name: null,
ship_to_countries: "",
created_at: "2016-10-07 08:04:12",
updated_at: "2016-10-07 08:04:12",
categories: {
id: 43,
slug: "social",
category_name: "Social",
category_url_name: "social",
category_parent_id: null,
category_grandparent_id: null,
created_at: "2016-10-07 08:04:03",
updated_at: "2016-10-07 08:04:03"
},
deals: [
{
deal_id: 875438,
merchant_name: "Groupon",
merchant_id: 6605,
status: null,
deal_text: "Save Up To 90% Off Local Restaurants, Shops, Events And More",
restrictions: "",
coupon_code: "",
deal_start_date: "1/31/2016",
deal_end_date: "11/6/2016",
discount_type: null,
deal_type: "deal",
affiliate_url: "",
final_sale_price: null,
was_price: null,
discount: null,
percent_off: null,
dollars_off: null,
network: null,
image: null,
skimlinks_url: null,
fmtcurl: null,
created: null,
lastupdated: null,
threshold: null,
rank: "3",
starred: null,
master_merchant_id: null,
brands: null,
local: null,
link_id: null,
direct_url: null,
pixel_html: null,
created_at: "2016-10-07 08:05:26",
updated_at: "2016-10-07 08:05:26",
votes: [
{
id: 2,
deal_id: 875438,
vote: 1,
user_id: 0,
uuid: "ad63d5a0-2582-11e6-9a1c-49da886e8d6c",
created_at: "2016-10-12 05:23:57",
updated_at: "2016-10-12 05:23:57"
},
{
id: 5,
deal_id: 875438,
vote: 1,
user_id: 0,
uuid: "bde41ea0-903c-11e6-b93b-51bc5393a427",
created_at: "2016-10-12 05:28:50",
updated_at: "2016-10-12 05:28:50"
}
],
clicks: [
{
id: 1,
tracking_id: null,
merchant_id: null,
deal_id: "875438",
user_id: null,
user_tracking_id: null,
referring_url: "http://trystin.app:8000/deals-coupons/groupon.com",
referring_domain: null,
page_type: null,
page_url: null,
utm_source: null,
utm_medium: null,
utm_term: null,
utm_campaign_id: null,
os: "OS X",
ip_address: "10.0.2.2",
browser: "Chrome",
initial_referring_domain: null,
referring_keyword: null,
deal_position: null,
click_type: null,
created_at: "2016-10-12 02:19:59",
updated_at: "2016-10-12 02:19:59"
},
{
id: 12,
tracking_id: null,
merchant_id: null,
deal_id: "875438",
user_id: null,
user_tracking_id: null,
referring_url: "http://trystin.app:8000/deals-coupons/groupon.com",
referring_domain: null,
page_type: null,
page_url: null,
utm_source: null,
utm_medium: null,
utm_term: null,
utm_campaign_id: null,
os: "OS X",
ip_address: "10.0.2.2",
browser: "Chrome",
initial_referring_domain: null,
referring_keyword: null,
deal_position: null,
click_type: null,
created_at: "2016-10-21 03:41:11",
updated_at: "2016-10-21 03:41:11"
},
{
id: 15,
tracking_id: null,
merchant_id: null,
deal_id: "875438",
user_id: null,
user_tracking_id: null,
referring_url: "http://trystin.app:8000/deals-coupons/groupon.com",
referring_domain: null,
page_type: null,
page_url: null,
utm_source: null,
utm_medium: null,
utm_term: null,
utm_campaign_id: null,
os: "OS X",
ip_address: "10.0.2.2",
browser: "Chrome",
initial_referring_domain: null,
referring_keyword: null,
deal_position: null,
click_type: null,
created_at: "2016-10-21 03:55:33",
updated_at: "2016-10-21 03:55:33"
},
{
id: 16,
tracking_id: null,
merchant_id: null,
deal_id: "875438",
user_id: null,
user_tracking_id: null,
referring_url: "http://trystin.app:8000/deals-coupons/groupon.com",
referring_domain: null,
page_type: null,
page_url: null,
utm_source: null,
utm_medium: null,
utm_term: null,
utm_campaign_id: null,
os: "OS X",
ip_address: "10.0.2.2",
browser: "Chrome",
initial_referring_domain: null,
referring_keyword: null,
deal_position: null,
click_type: null,
created_at: "2016-10-21 04:06:08",
updated_at: "2016-10-21 04:06:08"
}
],
deal_dealtypes: [
{
id: 1888,
deal_id: "875438",
dealtype_id: "3",
created_at: "2016-10-07 08:05:26",
updated_at: "2016-10-07 08:05:26"
}
]
},
}
I need some help with the following
Get limited fields and not all fields tied to Merchant
Get limited fields from deals object
Get Count of Votes and Clicks for each deal in the response
To get limited fields you can use select() function and to get counts you can use withCount() function.
So your query will be as:
$merchant = Merchants::where('merchant_url_text', $merchant_url_text)
->select('id', 'name')
->with(['deals' => function($q) {
$q->select('id', 'name')
->with('votes','clicks', 'deal_dealtypes')
->withCount('votes')
->withCount('clicks');
}])
->with('categories')
-> first();
need help about adding a new recort in a kendo grid.
I have a grid with a foreign key field. The grid is populated by a json data with subobject, returned from a webmethod. it looks like this:
[
{
"classe_iva": {
"id_classe_iva": 5,
"desc_classe_iva": "Esente",
"note_classe_iva": null
},
"id_iva": 37,
"desc_iva": "bbb",
"codice_iva": "bbb",
"imposta": 2,
"indetr": 2,
"id_classe_iva": 5,
"note": "dddddfsf",
"predefinito": false,
"id_company": 4
},
{
"classe_iva": {
"id_classe_iva": 6,
"desc_classe_iva": "Escluso",
"note_classe_iva": null
},
"id_iva": 52,
"desc_iva": "o",
"codice_iva": "jj",
"imposta": 1,
"indetr": 1,
"id_classe_iva": 6,
"note": "l",
"predefinito": false,
"id_company": 4
}
]
and this is the schema.model used in the kendo datasource:
model = {
id: "id_iva",
fields: {
id_iva: { type: "string", editable: false },
desc_iva: { type: "string" },
codice_iva: { type: "string" },
imposta: { type: "number" },
indetr: { type: "number" },
id_classe_iva: {type: "string"},
note: { type: "string" },
predefinito: { type: "boolean" },
id_company: { type: "number" }
}
}
.. and below is shown the grid columns format:
toolbar = [{
name: "create",
text: "Aggiungi nuova aliquota IVA"
}];
columns = [
{ field: "desc_iva", title: "Descrizione", width: 45 },
{ field: "codice_iva", title: "Codice", width: 45 },
{ field: "imposta", title: "Imposta", width: 45 },
{ field: "indetr", title: "Indetr", width: 45 },
{ field: "classe_iva.desc_classe_iva", title: "Classe IVA", width: 200, editor: categoryDropDownEditor, template: "#= classe_iva ? classe_iva.desc_classe_iva : 1 #", defaultValue: { id_classe_iva: 1, desc_classe_iva: "Acq. Intra-UE" } },
{ field: "note", title: "Note", width: 45 },
{
command: [{
name: "destroy",
text: "Elimina",
confirmation: "Sei sicuro di voler eliminare questa voce?"
} ,
{
name: "edit",
text: {
edit: "Modifica",
update: "Aggiorna",
cancel: "Cancella"
}
}
]
}
];
Theese settings works fine when i edit a row, and the grid shows the right content into the combobox field.
The problem is when i click on the "add new record" button, because when it tries to add a new row, it doesn't find the subobjects field "classe_iva".
if i change the column.field into this
{ field: "id_classe_iva", title: "Classe IVA", width: 200, editor: categoryDropDownEditor, template: "#= id_classe_iva ? id_classe_iva : 1 #", defaultValue: { id_classe_iva: 1, desc_classe_iva: "Acq. Intra-UE" } },
{ field: "note", title: "Note", width: 45 }
the add button works fine, but when the grid is loaded, the column id_classe_iva doesn't shows me the classe_iva.desc_classe_iva field...
how can i fix the issue??^?
thanks in advance.
to fix this issue, i used a workaround:
the error was thrown because, in the declaration of the field.template there where a not declared variable (classe_iva):
{ field: "id_classe_iva", title: "Classe IVA", width: 200, editor: categoryDropDownEditor, template: "#= classe_iva ? classe_iva.desc_classe_iva : 1 #", defaultValue: { id_classe_iva: 1, desc_classe_iva: "Acq. Intra-UE" } },
then, i declared a global variable
var classe_iva;
in this way, when i add a new record, the code doesn't throw any errors, and by the ternary if, the default value is set.
hope it will help someone.
A re-post of my previous question as I am not getting any satisfactory answer
The problem is as follows :
I have given my code in JSBin http://live.datatables.net/aqowib/2 for which I am not able to link to the sSwfPath properly. I am using codeiginter in my application so I am trying to load the files as follows:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://<?php base_url(); ?>/assets/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="http://<?php base_url(); ?>/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
<script src="http://<?php base_url(); ?>/media/js/ZeroClipboard.js" type="text/javascript"></script>
<script src="http://<?php base_url(); ?>/media/js/TableTools.js" type="text/javascript"></script>
And my script tag contains the following code:
$(document).ready(function(){
var oTable = $('#datatables').dataTable({
"sPaginationType":"full_numbers",
"sDom": 'Tlfrtip',
"oTableTools": {
"sSwfPath": "<?php base_url();?>/media/swf/copy_cvs_xls_pdf.swf"
},
"sScrollX": "100%",
"bScrollCollapse": true,
"bAutoWidth": true,
"aaSorting":[[0, "asc"]],
"bJQueryUI":true
}).columnFilter({
aoColumns: [ null,
null,
{ type: "select", values: [ 'male', 'female'] },
null,
null,
null,
null,
{ type: "select", values: [ '1', '2', '3', '4', '5', '6', '7','8','9','10'] },
{ type: "select", values: [ 'A', 'B', 'C'] },
null,
{ type: "select", values: ['P', 'A'] },
null,
null,
null
]
});
});
Everytime I am getting the 404 error saying that Unable to load SWF file - please check the SWF path
Please help me where am I wrong ?
Thanks in advance.
Ah, Got the solution !!
You just need to configure the sSwfPath URL in the TableTools.js file i.e.
CHANGE TableTools default settings for initialisation
Here I go :
TableTools.DEFAULTS = {
"sSwfPath": "http://localhost/codegen/media/swf/copy_cvs_xls_pdf.swf", <----------------- HERE IS WHERE I GOT STUCK
"sRowSelect": "none",
"fnPreRowSelect": null,
"fnRowSelected": null,
"fnRowDeselected": null,
"aButtons": [ "copy", "csv", "xls", "pdf", "print" ]
};
Thanks :-)
No need to write full path
Just place echo before base_url :)
Change
<?php base_url();?>
To
<?php echo base_url();?>