How to group multiple columns in jquery datatables - javascript

How to collapse and expand the table based on multiple columns grouping.
For example I have table like this
---------------------------------------------------------------
location | size | cont_no | price | depot | cond |
---------------------------------------------------------------
USA | XX | 123 | 230 | SED | LK |
USA | YY | 343 | 330 | ASD | HK |
UAE | XX | 233 | 230 | SED | LK |
IND | ZZ | 123 | 230 | SAD | FK |
IND | XX | 213 | 430 | ASD | KK |
IND | YY | 433 | 870 | GFD | FK |
USA | YY | 865 | 230 | SED | LK |
UAE | XX | 976 | 430 | SED | HK |
USA | ZZ | 342 | 230 | CCD | HK |
UAE | XX | 132 | 445 | SED | KK |
UAE | ZZ | 064 | 323 | YYD | LK |
IND | YY | 452 | 130 | ITG | HK |
---------------------------------------------------------------
This is how I need to group the above table
-------------------------------
location | XX | YY | ZZ |
-------------------------------
UAE | 3 | 0 | 1 |
USA | 1 | 2 | 1 |
IND | 1 | 2 | 1 |
-------------------------------
I want to group based on location and size column, Eg: USA has 3 XX and 0 YY and 1 ZZ,
And then when i click the row i want to expand and show those 3 XX and 0 YY and 1 ZZ other four column cont_no, price, depot, cond
please someone help me or give me some suggestion or link for reference.
Thank you

I think this is what your trying to make !
check the following question and answer
DataTables hidden row details example - the table header is misplaced (test case attached)
JSFIDDLE Sample 1
JSFIDDLE Sample 2

It could be done as shown in Row details example.
The trick would be to pre-process the data and perform the calculations and grouping with JavaScript before giving data to DataTables. This would depend on where your data comes from, static table or Ajax request. If you're producing the data on the server, this could be done server-side as well.
Basically the result data in JSON format could be as shown below. This will simplify working with child rows in DataTables.
[
{
"location": "UAE",
"XX": 2,
"YY": 0,
"ZZ": 1,
"details": [
["UAE","XX","123","230","SED","LK"],
// more records for the same location
]
},
// more locations
]

you can hack your way through other libs. will it worth the effort??.
or you can use Tabulator. which has multi column grouping.
example :
//load data as json
var tableData = [
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
{id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
{id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
{id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
]
var table = new Tabulator("#example-table", {
height:"311px",
layout:"fitColumns",
groupBy:function(data){
return data.gender + " - " + data.age; //groups by data and age
},
autoColumns:true,
});
table.setData(tableData);
<script src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet"/>
<div id="example-table"></div>
the only table lib that can group by multi col is Tabulator, AFAIK.
here are the other table libs.
-------- group by -------
single column | multi column
tabulator : yes | yes
bootstrap-table : yes | no
datatables.net : yes | no
dynatable.js : no | no
tabulator has bootstrap , simple white theme:
theme overview : http://tabulator.info/docs/4.1/theme
live view themes : http://tabulator.info/examples/4.1?#theming
read more:
http://tabulator.info/docs/4.2/group
https://datatables.net/examples/advanced_init/row_grouping.html
https://examples.bootstrap-table.com/index.html#extensions/group-by-v2.html

Related

MySQL select AND on multiple rows and multiple fields

I have a table:
+ --------------------------+---------------------------+--------------+--------+
| ID | SKU_ID | DKEY | DVAL |
+ --------------------------+---------------------------+--------------+--------+
| cjamtti7z00aivmv4ffc9ttuw | cjamtti7z00afvmv4ai5i0ffy | Part | A2030 |
| cjamtti7z00ajvmv4gztx7hq8 | cjamtti7z00afvmv4ai5i0ffy | Description | Single |
| cjamtti7z00akvmv4zvrvtazj | cjamtti7z00afvmv4ai5i0ffy | Length mm | 50 |
| cjamtti7z00alvmv4jxnryckh | cjamtti7z00afvmv4ai5i0ffy | Line Dia. mm | 6 - 10 |
+ --------------------------+---------------------------+--------------+--------+
I want to create a query that searches for SKUs that match a provided object:
{
'Fixing Hole Depth(mm)': '13 Min - 18 Max',
'Inside Dia. (mm)' : '11',
'Weight (g)' : '3'
}
I can't seem to find a way to combine AND and OR clauses that gives me the desired result.
To summarise, I need the SKU_IDs that match ALL the criteria in the object.
In basic SQL it can be achieved with GROUP BY + COUNT.
SELECT SKU_ID
FROM your_table
WHERE (DKEY = 'Fixing Hole Depth(mm)' AND DVAL = '13 Min - 18 Max,') OR
(DKEY = 'Inside Dia. (mm)' AND DVAL = '11,') OR
(DKEY = 'Weight (g)' AND DVAL = '3')
GROUP BY SKU_ID
HAVING count(*) = 3
It's required to have each SKU_ID + DKEY to be unique(otherwise you may have 3 values for DKEY = 'Weight(g)' for the same SKU_ID and query will not work as expected)
Maybe there is some less verbose way but it should be RDBMS-dependant
Your where clause can combine AND and OR easily, if you nest them correctly in brackets (). Try that.

How to create dc.js series chart with multiple factors

I am trying to create a series chart in dc.js using time series data. I would like to segment the series chart by both the attribute and person column. The plot should show 4 lines corresponding to 'attr_1' and 'attr_2' for each person 'ALL' and 'JANE, DOE'.
If I sum over the attribute, I get the plot to work using the following code. My question is, how do I modify this code to produce the plot that I describe above?
Data:
year_month | person | attribute | value
------------+-----------+--------------+-----------------+-----------------------
2015-07-01 | ALL | attr_1 | 16867.083333333333
2015-07-01 | ALL | attr_2 | 11488.583333333333
2015-07-01 | JANE, DOE | attr_1 | 23533
2015-07-01 | JANE, DOE | attr_2 | 16151
2015-08-01 | ALL | attr_1 | 16467.000000000000
2015-08-01 | ALL | attr_2 | 10557.458333333333
2015-08-01 | JANE, DOE | attr_1 | 23454
2015-08-01 | JANE, DOE | attr_2 | 14379
2015-09-01 | ALL | attr_1 | 16225.800000000000
2015-09-01 | ALL | attr_2 | 13024.080000000000
2015-09-01 | JANE, DOE | attr_1 | 23935
2015-09-01 | JANE, DOE | attr_2 | 19612
Code which lives in $.ajax function call:
var data = $.parseJSON(data);
var chart1 = dc.seriesChart("#chart1");
var ndx = crossfilter(data),
xDimension = ndx.dimension(function(d) {return [+Date.parse(d.year_month), d.person, d.attribute];}),
yGroup = xDimension.group().reduceSum(function(d) {return +d.value;});
function series_chart(chart) {
chart
.width(400)
.height(300)
.chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
.x(d3.time.scale().domain([new Date("7/01/2015"), new Date("6/01/2016")]))
.brushOn(false)
.yAxisLabel("Dummy Label")
.xAxisLabel("Month")
.seriesAccessor(function(d) {return "person: " + d.key[1];})
.keyAccessor(function(d) {return +d.key[0];})
.valueAccessor(function(d) {return +d.value[0];})
.dimension(xDimension)
.group(yGroup);
return chart;
}
series_chart(chart1)
.brushOn(true);
chart1.renderlet(function (chart) {
// rotate x-axis labels
chart.selectAll('g.x text')
.attr('transform', 'translate(-10,10) rotate(315)');
});
dc.renderAll();

preserve spaces in string java, javascript

I am sending data from java code to browser via http request.
data is something like this.
JAVA CODE OUTPUT
| Id | Operation | Name | Rows | Bytes | Cost (%CPU)| Time |
| 0 | SELECT STATEMENT | | | | 3 (100)| |
| 1 | FOR UPDATE | | | | | |
| 2 | BUFFER SORT | | | | | |
| 3 | TABLE ACCESS FULL| DD | 4 | 160 | 3 (0)| 00:00:01 |
But when I display it in browser it looks very bad.
Basically I have array of string which I am displaying in browser by using ng-repeat.
when I display it in java code it looks fine, but in browser not so good.
I did tried preserve white spaces but it did not help.
All i need to do is preserve all spaces in string.
{
white-space: pre;
}
Any idea help?
BROWSER OUTPUT.
The easiest way is to wrap it in pre tags, but the best way is to use HTML table cells.
<pre>
| Id | Operation | Name | Rows | Bytes | Cost (%CPU)| Time |
| 0 | SELECT STATEMENT | | | | 3 (100)| |
| 1 | FOR UPDATE | | | | | |
| 2 | BUFFER SORT | | | | | |
| 3 | TABLE ACCESS FULL| DD | 4 | 160 | 3 (0)| 00:00:01 |
</pre>
You need to use a monospace font (so that every letter has the same width).
You can do this using css:
{
font-family: "Courier New", Courier, monospace;
}

how can I associate one variable with the other two (mysql)?

I have four tables in mysql (object, type, price, date)
all of them have two coloumns: "id" and "variable"
for example:
Object table
+----+-----------+
| id | variable |
+----+-----------+
| 1 | shop1 |
+----+-----------+
| 2 | shop2 |
+----+-----------+
type table
+----+----------+
| id | variable |
+----+----------+
| 1 | lemon |
+----+----------+
| 2 | potato |
+----+----------+
Date table
+----+------------+
| id | variable |
+----+------------+
| 1 | 2014-10-11 |
+----+------------+
| 2 | 2014-12-11 |
+----+------------+
price table
+----+------------+
| id | variable |
+----+------------+
| 1 | 5000 |
+----+------------+
| 2 | 2000 |
+----+------------+
| 3 | 4000 |
+----+------------+
| 4 | 3000 |
+----+------------+
And what we really need in browser view:
Shop1:
+--------+------------+------------+
| | 2014-10-11 | 2014-12-11 |
+--------+------------+------------+
| lemon | 5000 | 3000 |
+--------+------------+------------+
| potato | 2000 | 4000 |
+--------+------------+------------+
Price is a variable and could be changed like an other variables (dates, type), columns of dates or types could be much more - (max - 5)
This table looks like Excel. But the price must depend on other variables, because other objects could use the same id of price.
First loop Through type table and get the ID
select * from type
Then Loop through ID's as $id
Then In loop you need to query each table for each required value.for example
select variable from price where ID = $id
select variable from date where ID = $id

Vertical grid/table layout Javascript

I need to display some JSON data vertically instead of horizontally:
Column1: Value1
Column2: Value2
and so on.
These values are coming from a database and I'll need the ability to scroll through the records being returned from the database.
This is for an MVC3 application using C#, and I'm open to whatever possible solutions are out there.
UPDATE:
While the below wasn't exactly what I needed, it put me on the right path to using a pivot table which I hadn't thought about previously.
If you want to use linq, You convert like this:
var pivotTable = from m in db.table
select new
{
Column1 = (from t1 in m
where t1.Field == "column1"
select t1.Value,
Column2 = (from t2 in m
where t2.Field == "column2"
select t2.Value
};
Json(pivotTable, JsonRequestBehavior.AllowGet)
First Look:
-----------------
Field | Value |
-----------------
column1 | 14 |
column2 | 34 |
column1 | 14 |
column2 | 36 |
column1 | 18 |
column2 | 34 |
After linq query
Column1 | Column2 |
-------------------
14 | 34 |
14 | 36 |
18 | 34 |

Categories