I'm using datatables.js for creating a report table. In my report page there are some filters. When apply any of filters my service returns data that has different column count. Because of this I'm destroying and recreating table. But an error occurs like Unable to get property 'style' of undefined or null reference.
var htmlTable = "<table class='display responsive no-wrap cell-border compact' style='margin: 0 !important' width='100%' id='policyTable'>" +
"<thead>" +
"<tr class='cell-border custom-header-footer tableHeaders' id='tableHeaders'>" +
"<th>Policy Details</th>" +
"</tr>" +
"</thead>" +
"</table>";
function InitAndLoadTableData(tableData, tableId, exportTitle) {
if ($.fn.DataTable.fnIsDataTable("#" + tableId)) {
var oldTable = $("#" + tableId).DataTable();
oldTable.destroy(true);
$("#divFor_" + tableId).append(htmlTable);
}
var table = $('#' + tableId)
.DataTable({
data: tableData,
dom: "<'row' <'col-md-12'B>><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"searching": false,
"paging": false,
"info": false,
"ordering": false,
//destroy: true,
responsive: true,
processing: false,
columns: tableColumns,
buttons: [
{ extend: 'copy', className: 'btn red btn-outline', title: exportTitle },
{ extend: 'pdf', className: 'btn green btn-outline', title: exportTitle },
{ extend: 'excel', className: 'btn yellow btn-outline', title: exportTitle },
{ extend: 'csv', className: 'btn purple btn-outline', title: exportTitle }
]
});
table.buttons().container().appendTo($('.col-md-12:eq(0)', table.table().container()));
}
instead you please try this...
$('#example').DataTable( {
destroy: true,
// all the other stuff you want to perform
} );
I ran into the same issue - the intent was the same as the columns are dynamic.
I finally had to use the following code:
let table = $("#table-id").DataTable();
table.clear();
table.destroy();
// Once you know the columns, recreate by calling DataTable initializer
// Another important part - I do remove and recreate <th> based on received columns
// or we get a weird 'style' error because of mismatch between data and table columns.
The table.clear() call was the missing piece - without it, the existing HTML was not being removed. Passing destroy: true within DataTable constructor was useless and table.destroy did the trick.
Related
I am using jquery datatable to display data. I am also exporting a CSV file using the datatable. I need to be able to add a field and value to a specific location on the csv file that is exported. The field and value do not exist on the datatable so currently when I export it, it is only copying what is on the datatable. How do I add a field and value "Totals" to the csv when exported to row 7 column H?
$('#ar-table').dataTable({
'paginate': false,
'bDestroy': true,
'dom': 'Bfrtip',
'buttons': [
'print', 'csv', {
extend: 'excel', filename: '*', extension: '.xlsx',
}, {
extend: 'pdfHtml5',
orientation: 'landscape',
text: 'PDF',
title: 'Open A/R - ' + $('#customer-name').val() + ' - ' + today,
}, {
extend: 'pdfHtml5',
orientation: 'landscape',
text: 'PDF-L',
title: 'Open A/R - ' + $('#customer-name').val() + ' - ' + today,
},
],
'aLengthMenu': [[25, 50, 100, 200, -1], [25, 50, 100, 200, 'All']],
'iDisplayLength': -1,
});
DATATABLE VIEW
CSV EXPORT
[
I was able to solve this by using the customize key for datatables. Here is a what my code looks now. This is not using a dynamic variable yet. Hardcoded currently but this solves my initial problem.
I have a datatable where it gets populated with data from the database. When the web page loads I call my Bind() function and this function populates the datatable with data as well as it initializes the datatable .
I also have a modal popup where users can add records. When they click the save button, it saves the record and I make an attempt to repopulate and reinitialize the data table.
The problem is that when I reinitialize the datatable the second time (on the button click), the datatable does not get reinitialized properly. It displays the headings after every record (see picture below). Please note that this only happens on the button click.
This my code so far:
$(document).ready(function () {
var dataTable;
Bind();
function Bind() {
$.ajax({
type: "POST",
url: "Clubs.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Table");
var row = $("[id*=gvCustomers] tr:last-child").clone(true);
$("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
$.each(customers, function () {
var customer = $(this);
$("td", row).eq(0).html($(this).find("ClubID").text());
$("td", row).eq(1).html($(this).find("ClubName").text());
$("td", row).eq(2).html($(this).find("ClubEmail").text());
$("td", row).eq(3).html("<span>" + $(this).find("ClubID").text() + "</span>");
$("td", row).eq(4).html("<img id='btnID' src='/assets/img/edit.png' Style='width: 20px; height: 18px;'</>");
$("[id*=gvCustomers]").append(row);
row = $("[id*=gvCustomers] tr:last-child").clone(true);
});
//This is where I initializes my datatable
$('table').each(function () {
dataTable = $(this).prepend($("<thead style=background-color:#ff974d></thead>").append($(this).find("tr:eq(0)"))).DataTable({
"responsive": true,
"searching": true,
"aaSorting": [],
"sPaginationType": "full_numbers",
dom: 'lBfrtip',
buttons: [
{
extend: 'copy',
className: 'btn btn-success'
},
{
extend: 'excel',
text: 'Excel',
title: 'Centre Information',
className: 'btn btn-success',
orientation: 'portrait',
exportOptions: {
columns: [0, 1, 2]
}
},
{
extend: 'pdf',
text: 'PDF',
title: 'Centre Information',
className: 'btn btn-success',
orientation: 'portrait',
exportOptions: {
columns: [0, 1, 2]
}
},
{
extend: 'print',
text: 'PRINT',
title: 'Centre Information',
className: 'btn btn-success',
orientation: 'portrait',
exportOptions: {
columns: [0, 1, 2]
}
}
]
});
});
}
});
Then this is the code in the save button where I try to reinitialize the datatable
$("#btnSave").click(function () {
dataTable.destroy();
Bind();
return false;
});
Please assist how I can reinitialize the datatable correctly.
Try storing the DataTable in a variable and destroy that before rebinding the data.
So first create a varaible that can be accessed in both functions.
var dataTable;
function Bind() {
//rest of code
}
Then assign the correct table to the variable
dataTable = $(this).prepend($("<thead style=background-color:#ff974d></thead>").append($(this).find("tr:eq(0)"))).DataTable({
And then on that button click destroy that
$("#btnSave").click(function () {
dataTable.destroy();
Bind();
return false;
});
function deleteRender(row, column, value) {
if (!value) {
return;
}
var status = getUserStatus(value);
var actionText = deleteBlockHtml;
if (!isUserContext()) {
actionText = '<span>Delete</span>';
}
if (status) {
actionText = '<span>Activate<span>';
}
return '<span class="grid-link-render"><a class="delete-grid-row" href="#" id="deleteUser_' + value.trim() + '">' + actionText + '</a></span>';
}
columnList = [
{text: 'Status', datafield: 'status', width: "8%", groupable: true, editable: false},
{text: 'Action', datafield: '_id', cellsrenderer: deleteRender, width: "10%", groupable: true, editable: false, filterable: false, sortable: false, menu: false},
];
I am calling the deleteRender() function on click of my delete button which is present in action.Unfortunately,when i scroll down to bottom it is not getting called in grid.
Can anyone plese help me.Thanks.
Please share some more code. The method in cellsrenderer method takes care of tailoring the html to be rendered into that cell of that column using the bounded data for that column which is called for each row when the grid is being painted.
i don't think deleteRender should contain the column list in there. Also, can you please show where you are defining the delete event that is attached for that 'Delete' link in the action column ?
Or please let me know if i'm missing something.
We are using the Scroller plugin for our jquery data table to allow virtual scrolling. However, we have requirement to support text wrapping inside a cell, as user would like to view the entire text instead of truncated one. I observed that it does not wrap the text by default. Is there a way to support this feature? Any possible workaround?
Fiddler
https://jsfiddle.net/Vimalan/2koex0bt/1/
html Code:
<table id="example" class="display" cellspacing="0" width="100%"></table>
js code:
var detailsSample = "DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled, disabled or customised to meet your exact needs for your table implementations."
var dataList = [];
for (var i=1; i<=500; i++)
{
var dataRow = {};
dataRow.ID = i;
dataRow.FirstName = "First Name " + i;
dataRow.LastName = "Last Name " + i;
if (i%5 ==0)
{
dataRow.Details = detailsSample;
}
else
{
dataRow.Details = "Large text "+i;
}
dataRow.Country = "Country Name";
dataList.push(dataRow);
}
$('#example').DataTable( {
data: dataList,
deferRender: true,
scrollX: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
searching: false,
paging: true,
info: false,
columns: [
{ title: "ID", data: "ID" },
{ title: "First Name", data: "FirstName" },
{ title: "Change Summary", data: "LastName"},
{ title: "Details", data: "Details", "width": "400px" },
{ title: "Country", data: "Country" }
]
} );
Expectation
In the above table, the "Details" column should always have a width of 400px and the text in that column should wrap.
Any suggestion will be greatly appreciated.
Found the solution by wrapping the column data in a div and setting the white-space, width css properties for the div.
Fiddler:https://jsfiddle.net/Vimalan/2koex0bt/6/
JS
$('#example').DataTable( {
data: dataList,
deferRender: true,
scrollX: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
searching: false,
paging: true,
info: false,
columns: [
{ title: "ID", data: "ID" },
{ title: "First Name", data: "FirstName" },
{ title: "Change Summary", data: "LastName"},
{ title: "Details", data: "Details" },
{ title: "Country", data: "Country" }
],
columnDefs: [
{
render: function (data, type, full, meta) {
return "<div class='text-wrap width-200'>" + data + "</div>";
},
targets: 3
}
]
} );
CSS
.text-wrap{
white-space:normal;
}
.width-200{
width:200px;
}
Not sure if you add in stylesheets or not, but set your table-layout to fixed and add in the white-space. Currently you are using white-space:no-wrap which negates what you're trying to do. Also I set a max-width to all your td's so this will happen whenever there is overflow.
Add this at the end of your jQUery
https://jsfiddle.net/2koex0bt/5/
$(document).ready(function(){
$('#example').DataTable();
$('#example td').css('white-space','initial');
});
If you want to just use the api, do this ( add in anymore CSS to change the styling ).
If you want to do it with CSS, do this:
table {
table-layout:fixed;
}
table td {
word-wrap: break-word;
max-width: 400px;
}
#example td {
white-space:inherit;
}
Js Code:
'columnDefs': [{
render: function (data, type, full, meta) {
let instaText = (data != null && data.length > 25) ? data.substr(0, 25) : data == null?"":data;
return '<div class="text-overflow" title='+'"'+ data +'"' +'>' + instaText + '</div>';
},
targets: [27]
}],
CSS:
{
overflow: hidden;
text-overflow: ellipsis;
max-width: 80%;
}
Using the code below, I can get the TableTools buttons to show up on the page, style correctly, and even change the mouse icon on the mouseover event, however the export function is not working. When I click on the button, nothing happens. Don't even get an error message.
The DataTable the TableTools plugin is working on does not exist on the page prior to the user hitting a "Search" button. Once this is done an Ajax call will pull the relevant data and create the DataTable. Again, this part of the program works fine, however when I click on the "Export" buttons (CSV, Excel, PDF)... nothing happens.
jQuery
$.ajax({
type: 'GET',
url: '#Url.Action("PensgcReport", "Home")',
data: { inputArray: inputArray },
traditional: true,
success: function (data) {
//Unpack return object into 2D array
var array = [];
$.each(data, function (key, value) {
var tempArray = [];
$.each(value, function(key, value) {
tempArray.push(value);
});
array.push(tempArray);
});
console.log(array);
$('#ReportTable').dataTable({
"bDestroy" : true,
"aaData": array,
"aoColumns": headers,
"bFilter": false,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"aaSorting": [],
"oLanguage": {
"sSearch": "Filter results:"
},
"sDom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "Content/media/copy_csv_xls_pdf.swf",
"aButtons":
[
{
'sExtends': 'csv',
"sFileName": "PENSGC_Report_" + new Date() + ".csv",
'mColumns': [0, 1]
},
{
'sExtends': 'xls',
"sFileName": "PENSGC_Report_" + new Date() + ".xls",
'mColumns': [0, 1]
},
{
'sExtends': 'pdf',
"sFileName": "PENSGC_Report_" + new Date() + ".pdf",
'mColumns': [0, 1]
},
]
}
});
}
})
HTML
This is the rendered HTML when the page loads (nothing special)
<table id="ReportTable" class="pretty">
</table>
Folder Structure
Change the swf path to:
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"
var table = $('#mytable').dataTable({ YOUR OPTIONS});
var tableTools = new $.fn.dataTable.TableTools(table, {
"buttons": ["copy",
"csv",
"xls",
"pdf",{ "type": "print", "buttonText": "Print me!" } ],
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf" });
$(tableTools.fnContainer()).prependTo('#mytable_wrapper');