Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm working on loading a new datatable when the user clicks on a button. The new datatable is populated by a server side script. When the user clicks on the button the datatable hangs and says "Processing".
$('#QuerySelectedBtn').on('click', function(event) {event.preventDefault();
$("#example").dataTable().fnDestroy();
var table = $('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax":{
url: './datasource02.php',
type: 'get',
error: function(){ // error handling
$(".example-error").html("");
$("#example").append('<tbody class="example-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#example_processing").css("display","none");
}
},
"columns": [
{ "data": "ID" },
{ "data": "user_id" },
{ "data": "option_name" },
{ "data": "option_value" }
],
"order": [],
"dom": 'lfrtipB',
"buttons": {
"dom": {
"button": {
"tag": "button",
"className": "btn"
}
},
"buttons": [
{ extend: 'copy', text: 'Copy' },
{ extend: 'csv', text: 'CSV' },
{ extend: 'excel', text: 'Excel' },
{ extend: 'pdf', text: 'PDF' },
{ extend: 'print', text: 'Print' }
]
}
});
});
Solution : Instead of using this line $("#example").dataTable().fnDestroy(); use below code
var table = $('#example').DataTable();
table.destroy();
Reason :
1. $("#example").dataTable();` // .fnDestroy() works
2 . $("#example"). DataTable();' // .fnDestroy() doesn't work
//.destroy(); will work
Problem in your current configuration :
Your using this API : dataTable().fnDestroy(); this will not work with DataTable(); api
For reference : https://datatables.net/reference/api/
Related
The following code is based on the jQuery event example at https://datatables.net/examples/advanced_init/events_live.html
The data is displayed in the table as expected. However, clicking a row returns: "You clicked on undefined's row", i.e. there is no value assigned where I would expect the file_id of the respective row.
I guess that the json data from '../api/data/uploads/' has to be realoded, however, I cannot figure out how.
Many thanks for your help.
$(document).ready(function() {
var tab_uploads= $('#tab_uploads').DataTable( {
"stateSave": true,
"stateDuration": -1,
"ajax": {
"url": '../api/data/uploads/',
"dataSrc": 'data'
},
"columns": [{ "data": 'file_id', "title": 'File ID' },
{ 'data': 'username', "title": 'Uploading user' },
{ 'data': 'supplier_id', "title": 'Supplier ID' },
{ 'data': 'timestamp', "title": 'Timestamp' },
],
"dom": 'Bfrtip',
"buttons": ['pageLength', 'copy', 'csv', 'excel'],
"order": [],
});
$('#tab_uploads tbody').on('click', 'tr', function () {
var data = tab_uploads.row( this ).data();
alert( 'You clicked on ' + data[0] + '\'s row' );
} );
});
I found a solution based on this discussion: https://datatables.net/forums/discussion/57563/datatable-returns-undefined-when-i-try-to-print-rowdata-in-console
Since you are using columns.data to define your columns the data
structure is objects not arrays. Instead of data[0] you need to use
data.id
Which translates into using alert( 'You clicked on ' + data.file_id + '\'s row' ); in the code above.
This question already has answers here:
ASP.NET MVC JsonResult Date Format
(25 answers)
Closed 3 years ago.
I am trying to pull date in my data tables but for some reason the format of the data is not correct. I am getting the data from a stored procedure.
Original:
/Date(1575612000000)/
Expected Output:
01-15-2020
Code example:
$(document).ready(function () {
var mesa = $('.datatable').DataTable({
filename: "LocationCodes",
responsive: true,
"bAutoWidth": false, // toggle this depending on how wide you want the table
"ajax": {
"url": "/controller/sp",
"type": "GET",
"datatype": "json"
},
"deferRender": true,
"responsive": true,
dom: 'Bfrtip',
"bSort": false,
buttons: [
'excel', 'print'
],
"columns": [
{ "data": "FileName" },
{ "data": "ProjectName" },
{ "data": "RecordInsertTime" }
]
Thanks,
Minhal
is this what you want?
var d = new Date(1575612000000);
let month=d.getMonth()+1 // 12
let date=d.getDate() // 6
let year=d.getFullYear()
console.log(`${date}-${month}-${year}`)
the btnSearchName will open a Modal with table of the search result, then it has checkbox per row to select, then after I click the btnSubmit, the Modal will close and must put the selected ssn_or_tin column in an input field like '123, 645, 936, 743', I already tried many codes but not working, please help
$('#btnSearchName').on("click", function() {
Namestable = $('#NamesDatatable').DataTable({
"processing": true,
'select': {
'style': 'multi'
},
'order': [[1, 'asc']],
dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-6'i><'col-sm-6'p>>",
"ajax": {
"url": '/Home/GetAllCusname',
"type": "POST",
"datatype": "json",
"data": function (d) {
d.searchParameters = {};
d.searchParameters.name = $('#txtName').val();
}
},
"columns": [
{
defaultContent: '',
className: 'select-checkbox',
'checkboxes': {
'selectRow': true
},
orderable: false
},
{ "data": "ssn_or_tin", "autoWidth": true },
{ "data": "name", "autoWidth": true }
]
});
});
$('#btnSubmit').on("click", function () {
var rows_selected = Namestable.column(0).checkboxes.selected(); //i have not tested this line of code yet if it's working,
maybe there is another way of getting the selected checkbox, maybe by their class if they have the 'selected' class
$.each(rows_selected, function () {
$('#txtSSNTIN').append(
//I don't know what code to put here, it must append the
'ssn_or_tin' values like '123, 953, 673' in the input field with
the id 'txtSSNTIN'
);
});
});
You could have try Onrowbound in DataTable. You dont have to specify these things
My datatable loads perfectly except the columndefs do not work.
Anybody got a clue?
Please help. I just want to add a click event to every cell in column 1. I get no errors either.
It works in this example on the end column...https://datatables.net/examples/ajax/null_data_source.html
var table = $mytable.DataTable( {
"serverSide": true,
"ajax": {
"url": url_string,
"cache": true,
"columnDefs": [
{"targets": 1,"data": null,"defaultContent": "<button>Select Image ID</button>"} ,
]
},
});
Found a great post on stack overflow that really helped.
and changed it to suit me this is the post Edit jQuery Datatable fields
And here is what I have working for me. I was concentrating too much on the API and less on just Jquery. The trick was execute the jquery after "drawCallback":
Credit to #Jeromy French
var table = $spr_cnt_tbl.DataTable( {
"serverSide": true,
"ajax": {
"url": url_string,
"cache": true,
"columnDefs": [
{"targets": 1,"data": null,"defaultContent": "<button>Select Image ID</button>"} ,
]
},
"drawCallback": function( settings ) {
apply_label();
}
});
var apply_label=function(){
$spr_cnt_tbl.find("td:nth-child(2)").not(':has(.label)').each(function(){
if( this.innerHTML===""){
$(this).wrapInner("<button class=btn btn-success id='sel_img' type='button'>Select Image</button>");
}
else {
$(this).wrapInner('<span class="label label-success"></span>');
}
});
};
});
});
I got a JQuery DataTable initialized with an empty dataset like this:
oTable = $('#accountsDefaultList').DataTable({
"bStateSave": true,
"aaData": accountsDefaultList(),
"aoColumns": [
{
"mData": "id",
"mRender": function (data) {
return '<button class="edit"><i class="fa fa-pencil-square-o"></i></button><button class="delete"><i class="fa fa-trash-o"></i></button>';
}
},
{ "mData": "title" }
],
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6 hidden-xs'f><'col-sm-6 col-xs-12 hidden-xs'T<'toolbar'C>>r>" +
"Rt" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"autoWidth": false,
"oTableTools": {
"aButtons": [
"copy",
"xls",
{
"sExtends": "print",
"sMessage": "Generated by Procoor <i>(press Esc to close)</i>"
}
],
"sSwfPath": "javaScript/smartAdmin/plugin/datatables/swf/copy_csv_xls_pdf.swf"
},
"fnStateSave": function (oSettings, oData) {
localStorage.setItem('accountsDefaultList', JSON.stringify(oData));
},
"fnStateLoad": function (oSettings) {
return JSON.parse(localStorage.getItem('accountsDefaultList'));
},
"sPaginationType": "full_numbers",
"preDrawCallback": function () {
// Initialize the responsive datatables helper once.
if (!responsiveHelperaccountsDefaultList) {
responsiveHelperaccountsDefaultList = new ResponsiveDatatablesHelper($('#accountsDefaultList'), breakpointDefinition);
}
},
"rowCallback": function (nRow) {
responsiveHelperaccountsDefaultList.createExpandIcon(nRow);
},
"drawCallback": function (oSettings) {
responsiveHelperaccountsDefaultList.respond();
}
});
I use this to update the dataset with the new data but it doesn't seem to work at all
accountsDefaultList.subscribe(function () {
var data = accountsDefaultList();
oTable.data(data);
});
I tested whether the data is returned and every thing is fine except for the dataset update, i saw suggestions like using fnClearTable and fnAddData but those do not even exist in the datatables api.