DataTables Filter Dropdown - Parse list, contains not exact - datatables

So my javascript is bad, but I have a datatables need that I cannot figure out. Relevant code here:
$('#lesson-table').DataTable( {
'data': cleanData,
'paging': false,
'order': [[ 8, 'asc' ], [ 3, 'desc' ], [ 1, 'desc' ]],
initComplete: function () {
// this is where we populate the filter dropdowns
this.api().columns([0,1,2,6,7]).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.header()) )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
var val = $('<div/>').html(d).text();
select.append( '<option value="' + val + '">' + val + '</option>' );
} );
} );
}
} );
// this removes duplicate dropdown values
var usedNames = {};
$("#lesson-table select > option").each(function () {
if (usedNames[this.value]) {
$(this).remove();
} else {
usedNames[this.value] = this.text;
}
});
So the change that was made in my datasource is that columns 1, the second column in the set, is now a comma separated list of items. Most of the time it is one item say: "Entertainment", but sometimes it can be "Entertainment, Sports, Healthcare" At the moment, it will show that list as an option in my dropdown, but what I need it to do is split them up and then filter by contains...not by exact.
Hope that makes sense. Can explain more if needed.

Related

Using select2 with datatables to filter on multple values

Im currently trying to filter each column of my datatable using a select2 dropdown.
My code currently filters correctly without the multiple tag on the select tag, but once I add the multiple value to my select tag I get the following error:
TypeError: a.replace is not a function
I have been trying to adapt the following datatables javascript:
link
Here is what I have currently:
$('#caseTable').DataTable( {
initComplete: function () {
var x = 0;
this.api().columns().every( function () {
var column = this;
var select = $('<select class="search2" multiple="multiple"><option value=""></option></select>')
.appendTo( $('.dropdown'+x))
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option id="'+d+'"value="'+d+'">'+d+'</option>' )
} );
x++
} );
$(".search2").select2();
}
} );
EDIT: I managed to fix it. I needed to store the multiple values into an array, and then pipe the values together to search for each individual value.
Here are the changes I made to the .on('change') function.
.on( 'change', function () { //when an option is selected
var val = new Array();
//set val to current element in the dropdown.
val = $(this).val();
if (val.length > 1){
valString = val.toString();
valPiped = valString.replace(/,/g,"|")
column
.search( valPiped ? '^'+valPiped+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
.draw();
} else if (val.length == 1) {
column
.search( val ? '^'+val+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
.draw();
} else {
column
.search('',true,false)
.draw();
}
} );
I managed to fix it. I needed to store the multiple values into an array, and then pipe the values together to search for each individual value. Here are the changes I made to the .on('change') function.
.on( 'change', function () { //when an option is selected
var val = new Array();
//set val to current element in the dropdown.
val = $(this).val();
if (val.length > 1){
valString = val.toString();
valPiped = valString.replace(/,/g,"|")
column
.search( valPiped ? '^'+valPiped+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
.draw();
} else if (val.length == 1) {
column
.search( val ? '^'+val+'$' : '', true, false ) //find this value in this column, if it matches, draw it into the table.
.draw();
} else {
column
.search('',true,false)
.draw();
}
} );

Pivot data dynamically for google line chart

I want to display "population" of various countries through the years in the same line chart. The data displayed is based on selections from a multi-select dropdown "Countries". Underlying Data Table has 3 columns:
Year, Country, Population
2012,countryA,33
2013,countryA,35
2014,countryA,40
2012,countryB,65
2013,countryB,70
2014,countryB,75
2012,countryC,15
2013,countryC,20
2014,countryC,25
I am trying to create a pivoted Data View from the underlying Data Table
The code I am using is:
function drawLineChart() {
var arr = $('#country').val();
var lineChartJson = $.ajax({
url: "../json/lineChart.json",
dataType: "json",
async: false
}).responseText;
var lineChartData = new google.visualization.DataTable(lineChartJson);
var view = new google.visualization.DataView(lineChartData);
var viewCols = [0];
for(var i = 0; i < arr.length; i++) {
var viewCols1 = [{
type: 'number',
label: arr[i],
calc: function (dt, row) {
return (dt.getValue(row, 1) == arr[i]) ? dt.getValue(row, 2) : null;
}
}];
viewCols = viewCols.concat(viewCols1);
}
view.setColumns(viewCols);
var aggCols = [{
column: 1,
type: 'number',
label: view.getColumnLabel(1),
aggregation: google.visualization.data.sum
}];
for(var i = 2; i < 4; i++) {
var aggCols1 = [{
column: i,
type: 'number',
label: view.getColumnLabel(i),
aggregation: google.visualization.data.sum
}];
aggCols = aggCols.concat(aggCols1);
}
var pivotedData = google.visualization.data.group(view, [0], aggCols);
But this does not seem to work as expected and I just get 1 Line in the chart with values for all countries added up (although I can see the legend for 3 countries)
On the other hand if I set my View columns as below, it works as expected.
view.setColumns([0, {
type: 'number',
label: arr[0],
calc: function (dt, row) {
return (dt.getValue(row, 1) == arr[0]) ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: arr[1],
calc: function (dt, row) {
// return values of C only for the rows where B = "bar"
return (dt.getValue(row, 1) == arr[1]) ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: arr[2],
calc: function (dt, row) {
return (dt.getValue(row, 1) == arr[2]) ? dt.getValue(row, 2) : null;
}
}]);
What is going wrong in the loop? Is something wrong with "concat" in the loop where I am creating View Columns? I also saw the viewCols array by using console.log and it seems to have the right elements
I was trying to follow the below post:
Creating pivoted DataView from existing google charts DataTable object
the problem has to do with scope
arr[i] is undefined within calc: function (dt, row)
here is another way to pivot the data...
google.charts.load('current', {
callback: function () {
var arr = [
'countryA',
'countryB',
'countryC'
];
var lineChartData = google.visualization.arrayToDataTable([
['Year', 'Country', 'Population'],
[2012,'countryA',33],
[2013,'countryA',35],
[2014,'countryA',40],
[2012,'countryB',65],
[2013,'countryB',70],
[2014,'countryB',75],
[2012,'countryC',15],
[2013,'countryC',20],
[2014,'countryC',25]
]);
// sort by year
lineChartData.sort([{column: 0}]);
// get unique countries
var countryGroup = google.visualization.data.group(
lineChartData,
[1]
);
// build country data table
var countryData = new google.visualization.DataTable({
cols: [
{label: 'Year', type: 'number'},
]
});
// add column for each country
for (var i = 0; i < countryGroup.getNumberOfRows(); i++) {
countryData.addColumn(
{label: countryGroup.getValue(i, 0), type: 'number'}
);
}
// add row for each year / country
var rowYear;
var rowIndex;
for (var i = 0; i < lineChartData.getNumberOfRows(); i++) {
if (rowYear !== lineChartData.getValue(i, 0)) {
rowYear = lineChartData.getValue(i, 0);
rowIndex = countryData.addRow();
countryData.setValue(rowIndex, 0, rowYear);
}
for (var x = 1; x < countryData.getNumberOfColumns(); x++) {
if (countryData.getColumnLabel(x) === lineChartData.getValue(i, 1)) {
countryData.setValue(rowIndex, x, lineChartData.getValue(i, 2));
}
}
}
// draw agg table
new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table-div',
dataTable: countryData
}).draw();
// draw line chart
new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart-div',
dataTable: countryData
}).draw();
},
packages: ['corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table-div"></div>
<div id="chart-div"></div>
I could figure out the problem with my code above.
"calc" is the callback function in loop. So only last value of loop variable "i" is visible within the loop.
Putting a wrapper function fixes it:
for(var i = 0; i <= arr.length; i++)(function(i) {
var viewCols1 = [{
type: 'number',
label: arr[i],
calc: function (dt, row) {
return (dt.getValue(row, 1) == arr[i]) ? dt.getValue(row, 2) : null;
}
}];
viewCols = viewCols.concat(viewCols1);
})(i);

condition editing using .editable(..) datatables

Im new to datatables, and Im having this issue thats bugging me for a while.
for example, I'm trying to edit the 5th column, but I want to disable it for part of the rows..
is it possible? cause I don't seem to find the way..
$('td:eq('5')', oTable.fnGetNodes()).editable('/'+appName+'/GetGenWidgetTableDataServlet',
{
type : 'text',
tooltip: 'Click to Edit',
indicator: 'Saving...',
placeholder : '',
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[2],true,true );
},
"submitdata": function ( value, settings ) {
debugger
var iPos = oTable.fnGetPosition( this );
var colPos = iPos[2];
iPos = iPos[0];
if(iPos!=null)
{
var aData = oTable.fnGetData( iPos );
var vRowType = aData[0];
var iId = aData[2];
var moduleID = iId.split("$")[0];
var unitID = iId.split("$")[1];
var processID = iId.split("$")[2];
var riskID = iId.split("$")[3];
var controlID = iId.split("$")[4];
}
return {
"Token": idhref,
"moduleID" :moduleID,
"unitID": unitID,
"processID" :processID ,
"riskID": riskID,
"controlID": controlID,
"rowType":vRowType,
"Action": "saveRow",
"columnName": aoCols[colPos]["Id"]
};
},
"height": "25px",
"width": "50px"
}
We use the datatables editable plugin (https://code.google.com/p/jquery-datatables-editable/ ) and it allows you to set a sReadOnlyCellClass. We set that class in the datatable fnRowCallBack function based on the values in the row.
You could set an "editable" class in your fnRowCallBack
oTable = $('#resultTable').dataTable( {
...
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( aData["something"] == "This row should be editable" )
{
nRow.className = "editable";
}
return nRow;
}
...
});
and modify your selector to
oTable.$('tr.editable td:eq(5)').editable( ...)

How i can change the sort order (from default ASC to DESC) if i use custom sorting function in DataTables?

I need perform sorting by date (dd.mm.YYYY H:i:s) in DataTables grid.
I already found DataTables sorting plugin and it works well - but i cant understand how i can change default sort order to descending for sorting plugin results.
I initialize datatables with this code:
$('.dt_table').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"aoColumns": [
{ "sType": "date-euro" },
null,
null,
null,
null,
null,
null
],
"iDisplayLength": 25,
"oLanguage": {
"sUrl": "/js/dt_ru.txt"
},
"fnDrawCallback": function() {
$(".editable").editable();
}
} );
And the code of sorting plugin is here:
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-euro-pre": function ( a ) {
if ($.trim(a) != '') {
var frDatea = $.trim(a).split(' ');
var frTimea = frDatea[1].split(':');
var frDatea2 = frDatea[0].split('.');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
} else {
var x = 10000000000000; // = l'an 1000 ...
}
return x;
},
"date-euro-asc": function ( a, b ) {
return a - b;
},
"date-euro-desc": function ( a, b ) {
return b - a;
}
} );
Use aaSorting option to specify the sorting by: http://datatables.net/ref#aaSorting.
$('.dt_table').dataTable( {
"aaSorting": [[0, 'desc']]
} );

flexAddData not working properly

i add row in flexigrid directly,
and i try to update row directly but flexAddData always show old row.
how to update row directly ?
any idea ? please help
i am sorry my english not well
if ( flag == 'add' ){
$.ajax({
type : "POST",
url : "tr_procurement_data.php",
data : "process=prod_name&id_prod="+id_prod+"&qty_pad="+qty_pad+"&hb_pad="+hb_pad ,
dataType : "json",
success : function(data){
//add record to array
rows.push({id: [data.id_prod], cell: [ data.id_prod, data.nm_prod, data.qty_pad, data.hb_pad ] });
data = {
total: 1,
page:1,
rows: rows}
$("#flex1").flexAddData(data);
}
});
}
if ( flag == 'edit' ){
var fgrid = getAllRow(); //save array
var fleng = fgrid.length;
fgrid.forEach(function(row) { alert(row);
if ( id_prod == row[0] ){
rows.push({id: [row[0]], cell: [ row[0], row[1], qty_pad, hb_pad ] });
}else{
rows.push({id: [row[0]], cell: [ row[0], row[1], row[2], row[3] ] });
}
});
data = { total: fleng, page:1, rows: rows}
deleteRow();
$("#flex1").flexAddData(eval(data));
}
}
function deleteRow() {
$("[id^=row]").each(function() {
$(this).find('div').each(function() { alert( $(this).html() );
$(this).remove();
});
});
}
function getAllRow() {
var arrReturn = [];
$("[id^=row]").each(function() {
var arrRow = [];
$(this).find('div').each(function() {
arrRow.push( $(this).html() );
});
arrReturn.push(arrRow);
});
return arrReturn;
}
that's my code hope
Why don't you use flexReload? This wil refresh The curent data in the grid
you need this:
$("#flex1").flexigrid({
dataType : 'json',
colModel : [{ ... }]
}).flexAddData({
total: 1,
page: 1,
rows: [{ cell: [ "value1", "value2", "value3"] }]
});