are there any way to add new column to the table with JQuery plugin DataTables?
Well it depends on what you need it for... if you just want to have columns hidden, then reveal them at a later time, then you'd do this to toggle the column (from the docs)
function fnShowHide( iCol )
{
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var oTable = $('#example').dataTable();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
The plugin doesn't have an interface (as far as I'm aware) for adding columns, but ordinary jQuery seems to do the trick:
$('#example thead tr,#example tfoot tr').append('<th>New title</th>');
$('#example tbody tr').append('<td />');
Related
I have a web application where you can drag and drop pictures into boxes. If you drop it in the one it will add the picture's information to the datatable, if you drop in the left it will remove the data from the datatable. I was wondering If there was a way I could remove the row based on the id?
$('#pictures')
.dataTable({
"columnDefs": [{
"orderable": false,
"targets": 1
},
{
"orderable": false,
"targets": 3
}
]
});
var t = $('#pictures')
.DataTable();
$("#left")
.droppable({
accept: ".draggable",
drop: function (event, ui) {
console.log("drop");
$(this)
.removeClass("border")
.removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped)
.detach()
.css({
top: 0,
left: 0
})
.appendTo(droppedOn);
var $id = $(this)
.children()
.last()
.attr('id');
var rowId = pictures[id].id;
t.row(pictures[$id].id)
.remove()
.draw(false);
}
});
This obviously isn't the entire thing; however, I think this is enough to identify any problems.
You can use DataTable's API to remove the corresponding row:
t.row("your selector here").remove().draw();
in row() you could use several kind of selectors. If you saved the row's id in a variable, simply use
t.row("#"+rowId).remove().draw();
Note that you have to call draw() after a remove, since datatables doesn't redraw itself after a remove due to performance reasons.
$('#pictures').DataTable().row("#YourRowId").remove().draw();
If the item you want to delete is the parent window;
window.parent.$('#pictures').DataTable().row("#YourRowId").remove().draw();
If you want to delete all the rows;
$('#pictures').DataTable().row().remove().draw();
You should pay attention to the JS version.
var table1= $('#TableID').DataTable({
"createdRow": function (row, data, dataIndex) {
var rowID = "row_" + data[0];
$(row).attr('id', rowID);
}});
var rowID = "#row_" + any format that follows as per your row ID; table1.row(rowID).remove().draw();
This will work for everyone. Here, in "createdRow" callback of the DataTable constructor, you can define all the data based styling that you want on your DataTable. I Have defined a row ID to be assigned to each row based on the value of the first column.
I have a datatable that is editable, and each row has a "child" datatable.
The problem is that the child datatable has so many fields, and I would like to transpose it to have a vertical orientation.
Meaning that the field headers are rows and the table data show as columns...
Please note that each child table has only one row of data, so the resulting transposed data table should consist of 2 columns, one for headers and the other for the data...
Also note that I have disabled pagination, filters and sorting for the child datatable, but I have initialized it to be support inline editing...
It is of the following structure:
$('#myDataTable tbody').on('click', 'tr.group + tr td.details-control', function () {
//console.log($(this).closest('tr'));
var tr = $(this).closest('tr');
var row = table.row(tr);
//console.log(table.row(tr).data());
if (row.child.isShown())
{
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
var batata= $('#myDataTablex').DataTable({
"info":false,
"bFilter": false,
"bSort": false,
"bPaginate":false
});
$('#myDataTablex').dataTable().makeEditable({
"aoColumns": [
......columnByColumnDefinitions here...]
});
}
});
});
I have 2 tables that are using DataTable jQuery Plug-in.
I wondering if there is a way to hide my pagination on the bottom right of my table.
Note:
Only show the pagination when I need one.
Hide the pagination when the query results is less than 10.
Use drawCallback option to handle DT draw event and show/hide pagination control based on available pages:
$('#table_id').dataTable({
drawCallback: function(settings) {
var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
pagination.toggle(this.api().page.info().pages > 1);
}
})
$('#dataTable_ListeUser').DataTable( {
//usual pager parameters//
"drawCallback": function ( settings ) {
/*show pager if only necessary
console.log(this.fnSettings());*/
if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
$('#dataTable_ListeUser_paginate').css("display", "block");
} else {
$('#dataTable_ListeUser_paginate').css("display", "none");
}
}
});
Use 'drawCallback' to solve this problem.
1.On the webpage, use developer tool to inspect the 'previous' button, then you will find a div element that wraps both the 'previous' and 'next' buttons. DataTables automatically assigned an id to this div based on your html table element's id.
For example, I have a table with id 'Atable'. In this table, DataTables automatically created a div element with id called 'Atable_paginate' to wrap the previous and next buttons.
2.For drawCallback, we write a function which checks if there is less than 1 page, if so, we hide element by utilising id.
For example, you have set there are 20 records on one page by
pageLength: 20,
which means if there are less then 20 records, we don't need to display 'previous' and 'next' buttons. So we write like below,
drawCallback: function(settings){
if($(this).find('tbody tr').length <= 20){
$('#Atable_paginate').hide();
}
}
3.The initialization of Atable should be like below
var table = $('#Atable').DataTable({
pageLength: 20,
lengthChange: false,
drawCallback: function(settings){
if($(this).find('tbody tr').length <= 20){
$('#Atable_paginate').hide();
}
}
});
4.If there are more than one table on the webpage, apply this method on each table.
You can use fnDrawCallback() method to hide the pagination in dataTable.
var oTable = $('#datatable_sample').dataTable({
"iDisplayLength": 10,
"fnDrawCallback": function(oSettings) {
if ($('#datatable_sample tr').length < 10) {
$('.dataTables_paginate').hide();
}
}
});
The length which you can define as per the row you want to display in the listing.
$(this) did not work for me, probably because I am using TypeScript. So I used a different approach to get the JQuery element for the table wrapper and the DataTables API. This has been inspired by the answer of BitOfUniverse and tested with DataTables 1.10.
TypeScript:
'drawCallback': (settings: any) => {
// hide pager and info if the table has NO results
const api = new $.fn.dataTable.Api(settings);
const pageCount = api.page.info().pages;
const wrapper = $('#' + settings.sTableId).closest('.dataTables_wrapper');
const pagination = wrapper.find('.dataTables_paginate');
const info = wrapper.find('.dataTables_info');
pagination.toggle(pageCount > 0);
info.toggle(pageCount > 0);
}
You can give options when you create your datables on Javascript
$('.examples').DataTable({
"paging": false
});
All options are listed here:
http://www.datatables.net/reference/option/
In the example below highlighting works quite well with individual rows.
In my code I can see that selection of an individual row works, however, the actual highlighting does not work.
I am using Twitter Bootstrap 3 + Datatables.
http://datatables.net/release-datatables/examples/api/select_single_row.html
Any help would be appreciated. I have followed the example as is and I think perhaps I have not configured the table properly in its init or Bootstrap does not quite like highlighting.
var oTable;
$( document ).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$("#pTable tbody tr").click( function( e ) {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});
/* Add a click handler for the delete row */
$('#deletePButton').click( function() {
var anSelected = fnGetSelected( oTable );
if ( anSelected.length !== 0 ) {
oTable.fnDeleteRow( anSelected[0] );
}
});
/* Init the table */
oTable = $('#pTable').dataTable( );
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
return oTableLocal.$('tr.row_selected');
}
});
So the deleteButton which is being referenced in the code works if I select a row and delete a row.
Just the highlighting doesnt work!
Is your table id "#pTable"?
Did you try adding a debbug stop on that method, to be sure that the selector is working?
On bootstrap to hightlight a row you must use one of this classes
Class Description
.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action
Bootstrap 3 Tables
I'm new to JS. How can i highlight selected row when user clicked on it at editable datatable?
Thank you.
If you are using the jquery datatable plugin, there is an example here :
http://datatables.net/release-datatables/examples/api/select_row.html
$(document).ready(function() {
/* Add/remove class to a row when clicked on */
$('#example tr').click( function() {
$(this).toggleClass('row_selected');
} );
/* Init the table */
var oTable = $('#example').dataTable( );
} );
/*
* I don't actually use this here, but it is provided as it might be useful and demonstrates
* getting the TR nodes from DataTables
*/
function fnGetSelected( oTableLocal )
{
return oTableLocal.$('tr.row_selected');
}