I'm trying to apply a column width to each column, but it is not being reflected in the output:
http://live.datatables.net/mekuxeya/1/edit?js,output
I've tried setting autoWidth to both true and false, but it does not seem to have any effect. Bootstrap styling, scrollX, and scrollY are also being applied.
How do I make a specific column unsortable? I have a grid with a link in the final column and I want to prevent sorting on that column.
My current startup call:
$('#rollupTable').DataTable({
"scrollX": true,
"colReorder": true,
fixedColumns: {
leftColumns: 1
//rightColumns:1
}
});
I have div and table inside. First I hide the div with jQuery.hide. Then I initialize the Datatable and call jQuery's show on the div. Now, even if though the window is too small for the table Responsive extension doesn't change the table. When I rescale the window, everything works fine.
Here's the jsFiddle: https://jsfiddle.net/psieniawski/kcyqqay8/
Window must be too small for the table when you run the example.
Is it me, or is it Datatables?
Can I have more than one Datatable on the same page, with different "id"?
I mean:
$(document).ready(function() {
$('#example').dataTable();
$('#example2').dataTable();
$('#example3').dataTable();
} );
Given the following URLs I would expect the download builder to show differently selected options for the styling:
datatables: https://datatables.net/download/#dt/dt-1.10.13/b-1.2.4/r-2.1.0/se-1.2.0
jquery-ui: https://datatables.net/download/#ju/dt-1.10.13/b-1.2.4/r-2.1.0/se-1.2.0
... however it always shows 'datatables'. Is that a feature or a bug?
Hi everyone,
I currently have a client-sourced table (debug code: uniqed) with individual column select drop-downs that work amazing. I have about 1000 rows and the performance is great. Amazing jQuery plug-in. Problem: my client just told me that this could grow to upwards of 40000 in a month. My client also told me that they really like the individual select filters in the footers and I can't remove them. Hence, I am worried about performance. See here if you don't know what I'm talking about when I say individual select filters:
https://datatables.net/examples/api/multi_filter_select.html
I was poking around and I saw the example here using client side and deferred rendering:
https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html
But the issue is I don't believe I can use deferred rendering since the client wants the individual select filters. I have to load up all the data for the select filters to even work...
Does anyone have any idea how I can accomplish this behavior of individual column filtering with good speed at high number of rows? I feel like I am reaching the limitations of the software/browser here...
Thanks!
Julian
'm using datatable to show some information. When I tried to use responsive design to show hidden detail like this. https://datatables.net/extensions/responsive/examples/display-types/modal.html I failed. Noted that I haven't implement Bootstrap since I have to use IE8 as my default browser.
For my knowledge, I think that when I apply "Modal details display", it should be worked well with IE8, rather than Bootstrap requires respond.js etc.
The current situration is that, when I work on Chrome/IE9+, everything works. But everything related to responsive design on IE8. It has no respond. For example, when I click on the green button on the left-most of rows, Chrome/IE9+ can pop-up a dialog but IE8 has no respond.
When editing multiple rows, data in read-only columns may be deleted. Here's an example that creates a table containing one read-only column.
http://live.datatables.net/mehequzu/4
1) Select both rows
2) Click the Edit button
3) Click in the textarea containing the message about Multiple Values
4) Click Update
This should not be permitted. Is there a workaround?
How to check a column is fixed or not , for a given index
Is there any way to disable animation when using the dependent() option of DataTables editor? For show() and hide() functions there is an optional parameter for enabling/disabling animation, I am not aware if it is possible to also set this flag within the dependent() callback function.
Thanks, Denis
I am initializing data table using ajax, calling a web service to return json data. It's working fine, but now I want to extract/display another data table on click of any value from column suppose it's project(project->xyz->next data table),so that on click I will get next hierarchy. I have read many solutions but did not get exact one.Help me to hit that.Thanks.
<html>
<head>
<h2 style="color:#2196F3;">Tickets Status</h2>
<script type="text/javascript" charset="utf8" src="/js/datatable/pratik/ColumnFilterWidgets.js"></script>
<link rel="stylesheet" type="text/css" href="/js/datatable/pratik/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="/js/datatable/pratik/ColumnFilterWidgets.css"/>
<link rel="stylesheet" type="text/css" href="/js/datatable/font-awesome.css" />
</head>
<body>
<p>
<input id="chk" type="checkbox" name="your-group"/>Enable/Disable Fixed Header!</p>
<table id="example" class="display cell-border" cellspacing="0" width="100%">
</table>
<script>
$(document).ready(function() {
var realPath ="http://localhost:8080";
var webServicePathm = realPath+"/mt/saasreporting/getopenticketssummary?";
//var project = projectname.innerText;
var parmUrl = "tenantid=BISIL";
var webCallUrl = webServicePathm+parmUrl;
var table= $('#example').DataTable( {
"ajax": {
"url":webCallUrl,
"dataSrc": function ( json ) {
for ( var i=0, ien=json.length ; i<ien ; i++ ) {
json[i][0] = '<a href="/message/'+json[i][0]+'>View message</a>';
}
return json;
}
}
});
$('#chk').on( 'click', function (){
if($('#chk').prop('checked')){
table.fixedHeader.enable();
alert('Enabled Fixed Header');
}
else if(!$('#chk').prop('checked')){
table.fixedHeader.disable();
alert('Disabled Fixed Header');
}
});
});
</script>
</body>
</html>
Pleease help. 
So, I have a datatable with X rows. In it I have a column named "Weight".
When I render my "Weight" Column for a Row, I want to check if the weight (data) for this Row is the lowest value of all Rows. I only want to look at/compare to "visible" Rows, so filtered Rows should be ignored. However, Rows on other pages should be included if paging us used!
I suspect I should do something in the render method in my columnDefs? In line of...:
"render": function (data, type, row) {
if (type == "display") {
if (ISLOWESTWEIGHT) {
return "<i class='fa fa-trophy'></i> " + data;
}
else {
return data;
}
}
}
I'm dynamically creating my datatable and HTML table. It works perefectly fine until the column numbers are same. But it doesn't update column headers when I call it again with different number of columns.
First time, the no.of columns is three, it creates three column table on tblActivitySummary but when I call LoadGrid _again with new data in _object.ActivitySummary which has two columns, it doesn't update column headers, creates a new Datatable with previous three-columns with an error in console:
Cannot read property 'sWidth' of undefined
I tried to destroy table like this but to no avail:
$('#tblActivitySummary').DataTable().destroy();
$('#tblActivitySummary').dataTable().fnClearTable();
Here is the ajax
$.ajax({
data: JSON.stringify(data),
url: urlGetRGUStatusReportData,
type: 'POST',
contentType: "application/json; charset=utf-8",
success: function (obj) {
var object = jQuery.parseJSON(obj.data);
LoadGrid("#tblActivitySummary", object.ActivitySummary, object.ColumnNamesActivitySummary, false);
});
Here is how I'm creating DataTable:
function LoadGrid(tableId, gridData, displayColumnNames, IsSearchable) {
var columnKeys = [];
for (var k in gridData[0]) {
columnKeys.push({ "data": k });
}
CreateHTMLTable(tableId, displayColumnNames); //Create table dynamically
$(tableId).DataTable().destroy();
$(tableId).dataTable().fnClearTable();
$(tableId).dataTable({
"searching": IsSearchable,
"bDestroy": true,
"scrollY": 450,
"scrollX": true,
data: gridData,
columns: columnKeys
});
}
Creating **HTML **table
function CreateHTMLTable(tableId, displayColumnNames) {
var columnNames = [];
for (var k in displayColumnNames[0]) {
columnNames.push(k);
}
var $toAttach = $("<thead><tr></tr></thead>");
for (var i = 0; i < columnNames.length; i++) {
var $thead = $("<th></th>");
$thead.text(columnNames[i]);
$toAttach.find("tr").append($thead);
}
$(tableId).append($toAttach);
}
Though it updates the data in it but it doesn't update the column headers. Why wouldn't it clear previous datatable column headers? Is this happening because I'm creating different columns on same table? Please help
as title.
I've tested DataTables with Glyphicons-Free version of Bootstrap. The icons for table sorting are not shown because CSS refers font-family 'Glyphicons Halflings'. We are discouraged from using Glyphicons because licensing conditions described on Bootstrap page contradict those written on Glyphicons page.
Is there a version of CSS not dependent on Glyphicons, or we need to exchange icons on our own?
The inline editing works nicely with the default styling, but it looks awful when using the Bootstrap 3 styles.
Example (click cells to edit) http://live.datatables.net/datoxopi/3/edit?output
The inline input fields don't stretch to use the full width and height of the cell.
We are currently in progress of migrating our application to be more usable on phones and tablets and are using bootstrap for this. We also use Datatables a lot.
We have an issue with some tables with many non sortable columns. The columns are too wide due to a large right padding, even for non sortable columns, so they don't fit on our screen.
I think the right padding that's done in the bootstrap integration css (line 148-150) should only be done when we also have sorting and not for every condensed table.
table.dataTable.table-condensed > thead > tr > th {
padding-right: 20px;
}
If I just use ordinary bootstrap table with table-condensed the right padding is 5px, with Datatable it's 20px. Without the table-condensed Datatable has 30 or 8px as right padding depending on if sorting is enabled or not.
See http://live.datatables.net/novejeje/2/
Any comments on this?
Regards
/Roger
I wan't to show an extra footer Row for Column wise sum.So I decided to show footer like Zero Config,So that I can replace headers with column sum. But in my table footer not visible.Any Help?
Hi Allan ... happy New Year!
I'm still having the issue with the multiselect fitering on the MJOIN table. (Old post: https://datatables.net/forums/discussion/39606/mjoin-and-multiselect-filtering-issue). I've sent you a private message prior to the holidays with the details and the link. By any chance, how can I solve this? Do I need to change sth with the mysql table setup maybe?
Many thanks
Is there a way to initialize Datatable with ajax URL, but without Datatable making automatic, immediate ajax call, or should I go for ajax.url().load()?
I'd like to set up the table with Ajax, but trigger the call manually later.