I'm using the dataTables plugin
On my sortable columns I want to replace the column text with a button.
However doing this:
$( oSettings.aoColumns[i].nTh).text();
I can retrieve the text of the respective column, BUT
$( oSettings.aoColumns[i].nTh).text("some text");
$( oSettings.aoColumns[i].nTh).html("<a href='#'>some button</a>");
Does not do anything.
Can somebody tell me why I can retrieve info from a cell but not edit it's content? Not necessarily a dataTables question, but maybe someone has run into something similar.
Thanks for help!
EDIT: This is the solution:
Inside your table call specify, which columns should be sortable = these get a .jqmSorter class
"aoColumns": [
/* Select */ {"bSortable": false },
/* Type */ {"sClass": "jqmSorter"},
/* From */ {"bSortable": false },
/* Status */ {"bSortable": false },
],
Then call the fnHeaderCallback in which I'm replacing the header cell content with a JQM button:
"fnHeaderCallback": function( nHead ) {
$(nHead).closest('thead').find('.jqmSorter').each( function () {
var sortTitle = $(this).text(),
sortButton =
$( document.createElement( "a" ) ).buttonMarkup({
shadow: false,
corners: false,
theme: 'a',
iconpos: "right",
icon: "ui-icon-radio-off"
})
sortButton.find('.ui-btn-text').text(sortTitle);
$(this).html( sortButton )
sortButton.addClass("colHighTrigger");
});
}
You can do it this way:
While defining table columns (define if you not doing it already), and use the sClass attribute of the table column definition (which is in JSON).
After this, that class will be applied to the table column.
After this, use the callback function of datatables : fnRowCallback
and in this, set the html as
$(nRow, '.your_class').html('Your HTML Values');
This will be called when each row of the table is rendered.
If you don't want it to do on each row, you can control that with an if-condition.
Use fnRender in your aoColumns settings, use it to return HTML code for that specific cell, drop downs, checkboxes, anything you want will work there.
"aoColumns": [
/*Col 1*/
{
"mData": "RowID",
"bSortable": false,
"sClass": "jqmSorter",
"fnRender": function(obj){
return "<input id='" + obj.aData.RowID + "' type='button' value='myval'/>"
}
},
/*Col 2*/
{
"bSortable": false,
"sClass": "jqmSorter",
"fnRender": function(obj){
return "<input id='" + obj.aData.RowID + "' type='button' value='myval'/>"
}
}
]
Related
I need to show text about the current page number and total page count between 'previous/next' buttons in the DataTable table this is how it should look like. I made pagingType: "simple", but I do not know how to put text between those two buttons.
The following approach will give you a basic layout which matches your request - but you may need to provide additional styling to achieve the look and feel you may want.
Here is the code:
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
"pagingType": "full",
"language": {
"info": "_START_ of _TOTAL_",
"paginate": {
"first": "",
"last": "",
"next": ">",
"previous": "<"
}
} ,
"initComplete": function() {
tabulate(this.api().page.info());
}
});
table.on( 'draw', function () {
tabulate(table.page.info());
} );
} );
function tabulate(pageInfo) {
var curr = pageInfo.page + 1;
var tot = pageInfo.pages;
$( "<span>" + curr + " of " + tot + "</span>" ).insertAfter( "a.paginate_button.previous" );
}
</script>
Using the default DataTables styling, this displays as follows:
And the "next" and "previous" arrows are highlighted on mouseover if there are more pages in the related direction:
Notes on the code:
We replace the standard pagination language with customizations, for our needs.
We use initComplete with an api callback to handle the initial display of our custom pagination display, and a draw() event function for subsequent changes.
The tabulate() function uses page.info() data to get the required numbers.
I have a datatable, I want to color code the column based value in the last row.
If the TYPE value is "O" then apply yellow color, otherwise nothing. My columns are dynamic.
expected result:
var dt= $(element).dataTable({
deferRender: true,
destroy: true,
"aaData": data, // data is coming from service
"aoColumns": columns // column is dynamic
});
SOLUTION
You can use drawCallback to handle table draw event and enumerate columns data with columns().every() to find columns containing required values and highlight them.
var table = $('#example').DataTable({
drawCallback: function(){
var api = this.api();
api.columns().every( function () {
var data = this.data();
if($.inArray('O', data) !== -1){
$(this.nodes()).addClass('highlight');
} else {
$(this.nodes()).removeClass('highlight');
}
});
}
});
Please note that the code above detects O in all rows. To handle only the last row you need to add more code.
DEMO
See this jsFiddle for code and demonstration.
Use the rowCallback
$(element).dataTable({
"rowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
switch(aData[0]){
case 'O':
$(nRow).css('backgroundColor', 'yellow');
//also style other rows here
break;
}
}
});
Simple demo: Fiddle
I'm using the following code to initialize jQuery DataTables:
var oTable = $('#qpidvulh_to-do_list').dataTable( {
"columns": [
{
"data": "item",
"className": "editable"
}
]
} )
The issue with this code is that it adds the editable class to the th of each column, even though I only want it added to the td of each column.
How can I get the code to only add the editable class to the cells of each column and not their headers?
Thanks to mainguy and markpsmith for posting their answers. I'll throw my own solution into the mix, but I'd still like to see what everyone thinks the best performing solution would be:
$('#qpidvulh_to-do_list thead th').removeClass('editable');
Use this to add the class to the cell, 100% working solution, make sure the you give the correct target number while adding the class, here createdCell function adds class to the targeted cell,
var oTable = $('#<?php echo $module; ?>').DataTable({
columnDefs: [{"orderable": true, "targets": 1,
'createdCell': function (td, cellData, rowData, row, col) {
$(td).addClass('myclass');
// $(td).parent('tr').attr('data-id', rowData[0]); // adds the data attribute to the parent this cell row
}
}]
});
I had this problem but the suggested solution didn't really work for me because I am applying different types of inputs (number, text) selectively to cells in multiple tables. I have an onclick event for the cell to convert it into an editable box. I changed where it is called from
table.on('click', '.edit-text', function() {
// yadda yadda;
}
to
table.on('click', 'td.edit-text', function() {
// yadda yadda;
}
In this way the function ignores the 'th' cells with that class.
EDIT:
A second way I have found is to use the createdCell option in the columns definition:
columns: [
{
data: 'property_name',
createdCell: cell => $(cell).addClass('some-class')
}
]
Why not simply use jquery?
$("td").addClass('editable');
Look here
Update: On second thought: It would be better to put this jquery snippet in the draw event of dataTables so it works too when pagination changes and the table is redrawn.
You can use fnRowCallback for this:
var oTable = $('#qpidvulh_to-do_list').dataTable( {
"columns": [
{
"data": "item"
}
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).children().each(function (index, td) {
$(this).addClass('editable');
});
}
"aoColumns":[null,{sClass:'editable'},null,null,{ "sClass": 'my_class other_class' }]
In my table I put the editable in the draw callback like this:
$('#table td.editable-class').editable();
and in the column defs I gave the editable cells a class. Here's an example:
var table = $('#blocks').dataTable({
ajax: {
url: ...
},
columns: [
{ data: "column_data", "name": "column1", visible: false },
{ data: "editable_column", class: "editable another-class" }
],
"drawCallback": function ( settings ) {
$('#table td.editable').editable();
}
});
Hope that helps.
The best way will be using CSS.
Just set the CSS class selector to affect the 'td' and not the 'th'.
Try this code:
td.editable {
color: red; /*Or some other attribute*/
}
Important: With this solution the 'th' element will still have the 'editable' class set, but it wont be affected by the CSS styling.
If you still need to remove the class on the 'th' element try this:
$('#qpidvulh_to-do_list th').removeClass('editable');
/* ADDITIONAL INFO */
If you need more info about CSS selectors, try this page:
https://www.w3schools.com/cssref/css_selectors.asp
I have already assigned some columns to hide from list but I am unable to hide those column's search option in datatables and php.
"aoColumnDefs": [{
"bVisible": false,
"aTargets" : [0,8,11,12,15]
}
]
this is for creating the select box for searching individual column.
$("thead th").each( function ( i ) {
this.innerHTML += fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
Now could you please tell me what to do so that the corresponding select box which is appearing top of the column for individual column search will be disappeared?
Thanks in advance.
Is it possible to edit multiple cells of the dgrid at the same time ?
I know that we can edit a single cell at a time by double/single clicking that cell and update it. And on the onBlur of that cell, the edited data gets updated for that cell.
But my requirement is:
click edit-link/edit-button for each row, which will display editors for the all the editable cells of that row,
update/edit the cells,
then click the save button(which will be next to the edit button) for that same row,
on clicking the Save link/icon , the edited cell's value should get saved to the store/server.
Below are some of the columns of the Grid.
// one of the editable columns others are also similar to this one..
editor({
label:"Outcome",
field:"outcome",
sortable: false,
editorArgs: {
options:[
{value: "1", label: "Opt1"},
{value: "2", label: "Opt2"},
{value: "3", label: "Opt3"},
]
},
renderCell: function(row, value, td, options){
put(td, "div", outcomeOptionsMap[value] || '');
}
}, Select, "dblclick" ),
// last column
{label:"Actions", field:"actions",sortable: false,
renderCell: function(row, value, td, options){
newValue = "<a href=\"#\" title=\"Edit\" onclick='editEntireRow(testgrid,event);'><img src='../static/images/edit.gif'/></a>";
newValue = "<a href=\"#\" title=\"Save\" onclick='saveRow(testgrid,event);'><img src='../static/images/edit.gif'/></a>";
newValue += " <a href=\"#\" title=\"Delete\" onclick='testgrid.store.remove("+row.id+");'><img src='../static/images/delete_icon.png'/></a>";
td.innerHTML = newValue;
}
BTW, I am using the dojo.store.JsonRest as store .
Grid Declaration
var MyGrid = declare([Grid, Selection, Keyboard]);
window.testgrid = new MyGrid(
{
store : Observable(Cache(jsonRest, Memory())),
selectionMode : "none",
getBeforePut: false,
columns: getColumns,
allowSelectAll: true,
minRowsPerPage: 5,
maxRowsPerPage: 20,
}, "gridContainer");
currently I am trying something like this, but not working...
function editEntireRow(grid,event){
// cols 3,5,7,8 steps to the left of the Action column are editable
grid.edit(grid.left(grid.cell(event),3));
grid.edit(grid.left(grid.cell(event),5));
grid.edit(grid.left(grid.cell(event),7));
//grid.edit(grid.left(grid.cell(event),8));
}