Message from webpage : datatables warning: table id - ajax

I have hosted one website in our company server.
In localhost I can access to all tables fine.
However in the hosted one when I click the link and that page contains tables gives me error:
** Message from webpage **
DataTables warning: table id=datatable-questionnaires - Ajax error. For more information about this error, please see http://datatables.net/tn/7
however I don't know how to fix this... how to solve this issue
edited:
`
var handleDataTables = function () {
var catId = $('#catId').val();
var typeId = $('#typeId').val();
$('#datatable-questions').dataTable({
"serverSide": true,
"ajax": {
"url": "handlers/_getQuestions.asp?catId=" + catId + "&typeId=" + typeId
},
"aoColumns": [
{
"bSortable": false
}
],
"fnInitComplete": function (oSettings, json) {
$('#datatable-questions_filter').append(" <button class='btn btn-sm btn-default' data-toggle='modal' data-target='#questionAddModal'>Criar Pergunta</button>");
}
});
$('#datatable-users').dataTable({
"serverSide": true,
"ajax": {
"url": "handlers/_getUsers.asp?"
},
"aoColumns": [
null,
null,
null,
{
"bSortable": false
}
],
"fnInitComplete": function (oSettings, json) {
$('#datatable-users_filter').append(" <button class='btn btn-sm btn-default' data-toggle='modal' data-target='#userAddModal'><span class='glyphicon glyphicon-user' aria-hidden='true'></span> Criar Novo</button>");
}
});
$('#datatable-questionnaires').dataTable({
"serverSide": true,
"ajax": {
"url": "handlers/_getQuestionnaires.asp?typeId=" + typeId
},
"aoColumns": [
null,
null,
null,
{
"bSortable": false
},
{
"bSortable": false
},
null
],
"fnDrawCallback": function () {
var $qActivate = $('.qActivate');
$qActivate.change(function () {
var isCheck = $(this).is(":checked");
var id = $(this).data('id');
jQuery.ajax({
data: {
id: id,
mode: isCheck
},
url: '../handlers/_activateQuestionnaire.asp',
type: 'POST'
});
});
},
"fnInitComplete": function (oSettings, json) {
$('#datatable-questionnaires_filter').append(" <a class='btn btn-sm btn-default' href='create_questionnaire.asp'><span class='glyphicon glyphicon-share-alt' aria-hidden='true'></span> Criar Novo</a>");
}
});
}

Related

DataTables warning: table id=data-table - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net

tried server processing for jQuery data table but getting error:
when run my program shows error like that
DataTables warning: table id=data-table - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 when this site open i cannot understand anything
var table;
//$('#data-table').dataTable().fnDestroy();
$(document).ready(function() {
$('#data-table tfoot th').each( function () {
var title = $('#data-table thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
getall();
table.columns().every( function () {
var that = this;
$(this.footer() ).find('input').on( 'keyup change', function () {
// console.log(this.footer());
if ( that.search() !== this.value ) {
// alert(this.value);
that.search( this.value ).draw();
}
} );
} ); });
function getall()
{
table = $("#data-table").DataTable({
"bDestroy": true
,
"bFilter": true,
"bProcessing": true,
"bDeferRender": true,
"bSort": true,
"bSearchable": true,
"sSearch":true,
"iDisplayStart" : 0,
"iDisplayLength" : 100,
"oLanguage": {
"sEmptyTable": " table is empty "
},
"bServerSide": true,
"sAjaxSource": "fetch.htm",
"sServerMethod": "GET",
"aoColumns":
[
{"mData": "name"},
{"mData": "email"},
{"mData": "fee"},
{"mData": "sname"},
{"mData": "contactno"} ,
{ "mData": "id",
"render" : function(mData,type,row,meta)
{
return ' <button class="btn btn-warning" onclick="get_details('+ mData +')"> Edit </button> <button class="btn btn-danger" onclick="get_delete('+ mData +')">Delete</button>';
}}
],
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
oSettings.jqXHR = $.ajax
({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (res, stat)
{
// console.log(res);
fnCallback(res);
}
});
},
"sPaginationType": "full_numbers", "aLengthMenu": [[2,5, 10, 15, 25, 50, 100], [2,5, 10, 15, 25, 50, 100]],// iDisplayLength: 100,
"fnDrawCallback": function () {
$(".tool").tooltip();
}
});
}

How can we access the datatable individual column searched value to controller(C# .net Mvc) while using the server side processing?

I have used datatable individual column searching .
below is my js code:
var BindDataTable = function (response) {
var oTable;
$("#example").DataTable({
initComplete: function () {
// Apply the search
this.api().columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change clear',
function () {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
},
"searching": true,
// dom: '<"class">Blfrtip',
dom: "<'row mb-3'<'col-sm-12 col-md-2 col-lg-2'l><'col-sm-12 col-md-10 col-lg-10 datatableButtonsCon text-right'Bf>>" +
"<'row'<'col-sm-12 datatablesData'tr>>" +
"<'row mt-4'<'col-sm-12 col-md-4 col-lg-6 infoCon'i><'col-sm-12 col-md-8 col-lg-6 pagCon'p>>",
"bServerSide": true,
"sAjaxSource": "/AspNetStudents/GetStudents",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
type: "POST",
data:aoData,
url: sSource,
success:fnCallback
})
},
"aoColumns": [
{ "mData": "Name" },
{ "mData": "RollNo" },
{ "mData": "CellNo" },
{ "mData": "JoiningDate" },
{ "mData": "ClassName" },
{ "mData": "TotalWithoutAdmission" },
{ "mData": "UserStatus" },
]
});
oTable = $('#example').DataTable();
oTable.columns(0).search("data");
oTable.draw();
I have also attached the backend C# code to access the individual datatable column value to controller.
How can we access the datatable individual column searched value to controller(C# .net Mvc) while using the server side processing?
just as an idea, I know it makes ajax request every time a draw method is called.In this case, the data can be serialized and sent,then the searched data can be accessed by performing a parse operation in the controller.
$.ajax({
type: "POST",
dataType: "json",
url: sSource,
data: function (data) {
data.filters = $(".filter").serialize();
},
success:fnCallback
})
// search
$(".filter").on("change", function (e) {
e.preventDefault();
table.draw();
});
...
// in controller
// parse request

v-on:click not working with datatables

I am using yajra datatables:
var table = $("#dt_user_draw").DataTable({
destroy: true,
processing: true,
responsive: true,
serverSide: true,
ordering: false,
"ajax": {
"method": "GET",
"url": 'url'
},
"columns": [
{
"data": "user"
},
{
"data": "email"
},
{
"data": "registered_at",
},
{
"render": function (data, wea, row) {
return '<i v-on:click="showDrawUser" class="nav-icon far fa-eye fa-fw " aria-hidden="true" title="Ver Draw"></i>';
}
},
]
});
In the last row, add v-on:click but this is not working. I do not how to do to vue render after datatables load

Datatable button not showing up using jquery

i have a problem with my datatable.
Using require.js buttons are not showing up as I would expect.
I have tried without require.js and it is working fine, using require I have this problem.
Here the code snippet:
UPDATE 15.12.2016:
var jobDataTable = function(){
requirejs.config({
baseUrl: "./assets",
paths: {
jquery: "js/vendor/jquery-1.11.1.min.js",
bootstrap: 'js/bootstrap/js/bootstrap.min',
datatables: 'plugins/dataTables/js/jquery.dataTables.min',
'datatables.bootstrap': 'plugins/dataTables/js/dataTables.bootstrap.min',
buttons: "plugins/dataTables/extensions/buttons/dataTables.buttons.min",
colVis: "plugins/dataTables/extensions/buttons/buttons.colVis.min",
html5: " plugins/dataTables/extensions/buttons/buttons.html5.min",
flash: " plugins/dataTables/extensions/buttons/buttons.flash.min",
print: " plugins/dataTables/extensions/buttons/buttons.print.min",
jsZip: "js/jszip"
},
shim: {
'bootstrap':{ deps:['jquery']},
'datatables':{ deps:['jquery', 'bootstrap']},
'datatables.bootstrap':{ deps:['datatables']},
'buttons': { deps:['datatables']},
'html5': { deps:['datatables', 'buttons']},
'flash': { deps:['datatables', 'buttons']},
'colVis':{ deps:['datatables', 'buttons']},
'print': { deps:['datatables', 'buttons']}
}
});
require(['jquery', 'bootstrap', 'datatables'], function($){
var dataset = app.getJobsByUser();
var jobTable = $('#axCsJobsTable').DataTable({
aaData: dataset,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
aoColumns: [
{ "mDataProp": "JOB_ID" },
{ "mDataProp": "JOB_NAME" },
{ "mDataProp": "JOB_EXPORT_DATE" },
{ "mDataProp": "JOB_EXPORT_FORMAT" },
{ "mDataProp": "JOB_CDATE" },
{ "mDataProp": "JOB_STATUS",
"sClass": "status",
"mRender": function (data, type, row) {
if (parseFloat(data) > 0) {
return "<span class='glyphicon glyphicon-ok-circle'></span>";
} else {
return "<span class='glyphicon glyphicon-time'></span>";
}
}
},
{
"mDataProp": null,
"className": "center",
"defaultContent": "<button id='axCsJobRemove' type='button' class='btn btn-default btn-sm'> <span class='glyphicon glyphicon-trash'></span> Delete </button>"
},
{
"mDataProp": null,
"className": "center",
"defaultContent": "<button id='axCsJobConvert' type='button' class='btn btn-default btn-sm'> <span class='glyphicon glyphicon-save'></span> Convert </button>"
}
]
});
$('#axCsJobsTable tbody').on( 'click', '#axCsJobRemove', function () {
var data = jobTable.row( $(this).parents('tr') ).data();
if (removeJob(data)==1){
jobTable
.row( $(this).parents('tr') )
.remove()
.draw();
}
});
$('#axCsJobsTable tbody').on( 'click', '#axCsJobConvert', function () {
var data = jobTable.row( $(this).parents('tr') ).data();
if(startJob(data)==1){
console.log('Job run successfully');
$('#axCsJobsTable').dataTable().fnDestroy();
setTimeout(function() { jobDataTable(); }, 3000);
}
});
});
}
Some ideas where It hangs?
Missing some dependencies?
Regards,
Patric

DataTables: Ajax include space in search filter

I have this code but i can't do a search filter with space or comma,
I need do a smart search with ajax on datatables
Datatables ajax code:
$(document).ready(function () {
oDtable = $('#exc').dataTable({
"scrollX": true,
"scrollY": 300,
"oSearch": { "bSmart": false, "bRegex": true },
"processing": true,
"serverSide": true,
"ajax": "/ajax/getJSONResultsForDT?table=eventos&primaryKey=id",
"columns": [
{"data": 'nombre'},
{"data": 'descripcion'},
{"data": 'fecha_inicio'},
{"data": 'fecha_fin'},
{"data": "created_by"},
{"data": "updated_by"},
{"data": null}, //6 y 7
{"data": null}
],
"columnDefs": [
{
"targets": [6],
"orderable": false,
"render": function (data) {
$id = data.id;
return '<button class="btn btn-default" data-toggle="modal" data-target="#edit-modal">Edit</button>';
}
},
{
"targets": [7],
"orderable": false,
"render": function (data) {
return '<a class="btn btn-danger" data-fancybox-type="iframe">' + 'Delete' + '</a>';
}
}],
"bPaginate": true,
"sPaginationType": "full_numbers",
});
});
don't know what else to write
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

Resources