I know how to set column names by using:
var table = $('#'+String(response.chartID[i])).DataTable({
stateSave: true,
aoColumnDefs: aryJSONColTable,
processing: true,
serverSide: true,
bDestroy: true,
"scrollX": true,}))
But is it possible to set oaColumnDef inside DataTable object?
For example on specific callbacks, I can set oaColumnDef to another set of names.
The closest I had is inside any callback, I've tried
$(this).dataTable().fnSettings().aoColumns
to get column as objects
But is it possible to set it again?
I've also tried
$(this).dataTable().aoColumnDefs = AnotherArray
However, it seems that this doesn't work.
Can anyone point me to the right direction?
Thanks
Assuming the variable table declared above
if you want to update particular column
table.fnUpdate("newChangedValue", row-index , column-index);
if you want to update complete row
oTable.fnUpdate( ['column1Value', 'column2Value', 'column3Value', ... ], rowIndex );
to add new record
table.fnAddData( [ column1Value, column2Value, column3Value.... ]);
to get clicked row index
$("#tblchargeRate tbody").delegate("tr", "click", function() {
var iPos = table.fnGetPosition( this );
});
var aData = table.fnGetData( iPos );
aData[0] is first column element in datatable
Note: take care of index value i.e first row in data table will be at 0 index
You can updating your datatables, by the code you posted you are using a old version.
In the new version you have a column function to get the columns by selectors.
Check the API doc
Related
Working on the Datatables Code and I had specified the like this:
{className: "editable alignCenter", "targets":"_all"}
Basically all my columns are coming dynamically, so i want to target the editable only the column which are , i had a dataattribute where i can identify the field is primarykey or identity field.
So i want to modify that if that field is defined, leaving that field, all other fields should be editable and that field can be left out
trying like this
var editableTargets = $('#layout').attr('data-array'); - this is coming as a comma seperated list like 0,1,2,3,4,5
"columnDefs": [
{className: "editable alignCenter", "targets": [editableTargets]}
]
but it seems to be not working
#andrewjames Thanks for the quick tip, it is working,
Now i am trying to find the last array from the editableTargets and remove the class editable aligncenter and add a different class to it and add a sorting: false to it
just give me a start
Regarding your updated notes:
Now i am trying to find the last array from the editableTargets and remove the class editable aligncenter and add a different class to it and add a sorting: false to it
Again, I may have misunderstood, but... here are some pointers to help you:
Assume you have this:
var editableTargets = "0,1,2,3,4,5";
The following code will split this into two arrays - one containing only the final element, and the other containing everything else:
// convert to an array of numbers:
var array = editableTargets.split(",").map(Number);
// remove the last element, and capture it as "i":
var i = array.pop();
// create an array containing the last element:
var lastItem = [];
lastItem.push(i);
So, array is [0,1,2,3,4] and lastItem is [5].
There may be better ways to do this in JavaScript, but this should work.
Now you should be able to use these in your column defs section - something like this (but I have not tested this part!):
"columnDefs": [
{ className: "editable alignCenter", "targets": array },
{ sorting: false, "targets": lastItem }
]
I am using tabulator version 4.4.3
I have a use-case where I need to calculate cell values for each row depending data from different cell on different rows row.getPrevRow() with row.getNextRow()
As follows:
function distanceMutator(value, data, type, params, component) {
var row = component.getRow();
var prevRow = row.getPrevRow();
var nextRow = row.getNextRow();
// Do not apply for first and last rows
if (prevRow && nextRow) {
var nextdis = nextRow.getData().distance;
var prevdis = prevRow.getData().distance;
// Do the math
// ... yada yada
return result;
}
This does work if I am using type=== "edit", when component is a cell but not when initial data is set with setData(); where component is ColumnComponent.
My question is:
Is there a convenient way to access current rows (and its previous and next rows as well) from ColumnComponent ?
It is not advisable to try an navigate through row components inside a mutator
The mutator is called on the data as the row component is being built, one row at a time, so there are not an row components to navigate to when the table is being initiated.
At that point it may be easier to find the index of the row data object in the original array using findIndex on the array and then increment it to find the next rows data
i'm trying to make my input Search field Searching for 2 values in 2 distinct columns at the same time in JS. i have started with 1 value Search with this code :
$("#boo").click(function(){
var table = $('#table').DataTable();
table.search("boo").draw();
});
i have try column().search() but I couldn't get it to work properly:
$("#boo").click(function(){
var table = $('#table').DataTable();
table.column([2,3]).search("boo", "New").draw();
});
I'm trying to filter into the table eg the gender and type, can you help me on that?
Try using .columns instead of .column:
$("#boo").click(function(){
var table = $('#table').DataTable();
table.columns([2,3]).search("boo", "New").draw();
});
See DataTables documentation here.
The function column().search() will search a specific column whereas columns().search() allows you to search multiple columns as defined in your array.
EDIT
i just added a line on your exemple :
$("#boo").click(function(){
var table = $('#table').DataTable();
table.search("boo").draw();
table.columns([2,3]).filter("boo", "New").draw();
});
Just search on 2 columns:
$("#boo").click(function(){
var table = $('#table').DataTable();
table.column(2).search("male");
table.column(3).search("asia").draw();
});
The .draw() function does not do anything you do not tell it to. In simple terms, you can run many different events then call them all with .draw(). Like Zim84 suggested, you can search in the 2 different columns but on the first one, you wouldn't do .draw() BUT you would call .draw() on your second search.
So.. yes, doing something like
table.column(2).search("male");
table.column(3).search("asia").draw();
would work fine.
I've a table set up with Tabulator with unknown data ( pulled from a file) so i can't make a column definitions setup for it except for general setup that works with any kind of data.
now I'm in situation that i need to add certain code for each row under column code which is included with the existing table.
i looked for away to add code something like SX0001 on the first row and just add 1 each row so the second row would be look like SX0002
I've checked this link http://tabulator.info/docs/4.1/update#alter-replace i saw some functions that works on rows but not columns .
solution i'm trying to achieve:-
the link includes under updateData function that i need to have index with default value (Id)
giving that I'm not sure what type of date it might have or be included with the table i've added a new column using this code
table.addColumn({title:"id", field: "id" , formatter:"rownum",width:40, align:"center"} , true)
now I don't know how to get the Length of the Column to loop through each one of the column and run function like this
var no = 1000;
var str = "SX";
var x = str + no ;
table.updateData([{id:1, code:x}]);
var no = no +1;
is there's anyway to do this ?
You can retrieve the data stored in the table using the getData function.
var data = table.getData();
This will return an array containing the data objects for each row in the table.
Then to get your lenght just do data.length
If you want to count the table data the getDataCount exactly for this, which returns a count of rows in the table:
var count = table.getDataCount();
But actually your current approach will result in the table being redrawn a load of times as you update the row data.
Mutators
Instead you should look at using a Mutator, these allow you to alter data as it enters the table, so in this case you could do something like this:
//global variable to keep track of row id
var rowCount = 0;
//custom mutator
var idMutator = function(value, data, type, params, component){
//increment rowCount and assign as column value
return rowCount++;
}
//in your column definition set this mutator
{title:"ID", field:"id", mutatorData:idMutator}
By using this approach the value is set as the data is loaded into the table, nothing needs to be redrawn and the whole proceess is much more efficient
I'm trying to get all of the values on a 4th column of my datatable table. (both visible and unvisible rows).The 4th column of each row is consist of a checkbox. After I get them, I need to change 'checked' property of them and send back to table. Currently, I'm able to get data but I do not know how could I send them back to datatable after modifying. In the column that I'm trying to retrieve checkboxes are exist. Here is my code :
$(document).on('click', '#select_all', function()
{
var rows = $("#results_container table").dataTable().fnGetNodes();
var cells = [];
for(var i=0;i<rows.length;i++)
{
// Get HTML of 4rd column (for example)
console.log( $(rows[i]).find("td:eq(3)"));
}
});
Here is what console.log statement prints out :
[td.sorting_1, prevObject: jQuery.fn.jQuery.init[1], context: tr, selector: "td:eq(3)"]
The check property that I want to modify is under 0: td.sorting_1 -> childNodes screen shoot of my console view
So how could I changed this checked value and see the result on my datatable?
In your for loop store your data to a variable:
var dataHolder = $(rows[i]).find("td:eq(3)")
Then access your data like this:
dataHolder = dataHolder[0].childNodes;
Then try your console.log() on the dataHolder.
You should be able to change the value like this:
dataHolder[1].checked = true;