Datatable button not showing up using jquery - jquery-plugins

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

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 to Edit a row in Datatable .net core

I try to update a row in my datatable with .net core. Datatable show data and have a new/delete button that works. But when I try to edit a row, I can't get it to work.
Here is mi index.cshtml. Thanks
"ajax": {
"url": "../LoadIntervaloTrabajo",
"type": "POST",
"data": { "codigo": #Model.codigo},
"datatype": "json"
},
"columns": [
{ "data": "horario", "autowidth": true },
{ "data": "codigo", "autowidth": true },
{ "data": "descripcion", "autowidth": true },
{ "data": "horainicio", "autowidth": true },
{ "data": "duracion", "autowidth": true },
{ "data": "cortentrada", "autowidth": true },
{ "data": "cortintermedia", "autowidth": true },
{ "data": "cortsalida", "autowidth": true },
{ "render": function (data, type, row) {
return "<a href='#' class='btn btn-info' onclick=EditData('" + row.codigo + "'); >Editar</a>";
}
},
function EditData(codigo) {
var table = $("#customerDatatable").DataTable();
var r = table.rows(".selected").nodes()[0];
if ($(table.buttons(".editButton")[0].node).find("span").text() == "Cancel") {
$(r).children("td").each(function (i, it) {
if (i > 0) {
var od = table.cells(it).data()[0];
$(it).html(od);
}
});
setButtons('cancel');
} else {
$(r).children("td").each(function (i, it) {
if (i > 0) {
var h = $("<input type='text'>");
h.val(it.innerText);
$(it).html(h);
}
});
setButtons('edit');
}
I try to update a row in my datatable with .net core.
To implement updating row functionality, you can refer to the following code snippet.
Render two buttons for updating row within the last column
"columns": [
{
"data": "horario", "autowidth": true
},
{ "data": "codigo", "autowidth": true },
{ "data": "descripcion", "autowidth": true },
{ "data": "horainicio", "autowidth": true },
{ "data": "duracion", "autowidth": true },
{ "data": "cortentrada", "autowidth": true },
{ "data": "cortintermedia", "autowidth": true },
{ "data": "cortsalida", "autowidth": true },
{
"render": function (data, type, row) { return "<a href='#' class='btn btn-info' onclick = EditData(this); >Editar</a><a href='#' class='btn btn-info btn-hidden' onclick = UpdateData(this); >Updatear</a>"; }
}
]
JS function
function EditData(btnedit) {
//find current row
var $row = $(btnedit).parent().parent();
var $tds = $row.find("td").not(':nth-child(2)').not(':last');
$.each($tds, function (i, el) {
var txt = $(this).text();
$(this).html("").append("<input type='text' value=\"" + txt + "\">");
});
$(btnedit).siblings("a").removeClass("btn-hidden");
$(btnedit).addClass("btn-hidden");
}
function UpdateData(btnupdate) {
var $row = $(btnupdate).parent().parent();
var horario = $row.find("td:nth-child(1)").find("input").val();
var codigo = $row.find("td:nth-child(2)").text();
var descripcion = $row.find("td:nth-child(3)").find("input").val();
var horainicio = $row.find("td:nth-child(4)").find("input").val();
var duracion = $row.find("td:nth-child(5)").find("input").val();
var cortentrada = $row.find("td:nth-child(6)").find("input").val();
var cortintermedia = $row.find("td:nth-child(7)").find("input").val();
var cortsalida = $row.find("td:nth-child(8)").find("input").val();
var data_for_update = { "horario": horario, "codigo": codigo, "descripcion": descripcion, "horainicio": horainicio, "duracion": duracion, "cortentrada": cortentrada, "cortintermedia": cortintermedia, "cortsalida": cortsalida };
//console.log(data_for_update);
//make request to update data
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: "/{controller_name_here}/Update",
data: JSON.stringify(data_for_update),
success: function (json) {
console.log(json);
var $tds = $row.find("td").not(':nth-child(2)').not(':last');
$.each($tds, function (i, el) {
var txt = $(this).find("input").val()
$(this).html(txt);
});
$(btnupdate).siblings("a").removeClass("btn-hidden");
$(btnupdate).addClass("btn-hidden");
},
//...
});
}
CSS style
.btn-hidden{
display:none;
}
Test Result

kendo-ui grid column template function field-name

I would like find out, what is the field name in a template function like:
{
field: "country",
template: function(e){
var tmp = "";
var guid = kendo.guid();
$.each( e.country, function( key, value ) {
tmp += '<span class="xyz">' + value.text + '</span>';
});
return tmp;
},
}
Sample: Associative array in grid cell
I don't have the field name "country" in the template: function(e). There are only the field data in the function from template.
Is there a method, like kendo.guid(), that I have the field name "country" for sample in the function.
See if this answers your needs:
{
field: "country",
title: "Country",
template: function(e, field = "country") {
console.log("Field name:", field);
console.log(e[field]);
return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
},
}
You can see an example of how this can be used in the snippet.
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script id="noDataTemplate" type="text/x-kendo-tmpl">
<div>
No data found. Do you want to add new item - '#: instance.input.val() #' ?
</div>
<br />
<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>
</script>
<script>
function getTemplate(e, fieldName) {
if (fieldName === "country") {
return e.country.reduce((prev, current) => prev + '<span class="k-button" style="line-height:1.25em; cursor:default;">' + current.text + '</span>', "");
} else {
return e[fieldName];
}
}
$(document).ready(function () {
var data = [
{
'id':'wpErpOs_1',
'name': 'Rolf',
'country': [{ 'text':'Schweiz','id':'1'}],
'flag':false
}, {
'id':'wpErpOs_2',
'name': 'Hans',
'country': [
{ 'text':'Deutschland','id':'2'},
{ 'text':'Schweiz','id':'1'},
{ 'text':'Österreich','id':'3'}
],
'flag':false
}, {
'id':'wpErpOs_3',
'name': 'Esther',
'country': [{ 'text':'Schweiz','id':'1'}],
'flag':false
}, {
'id':'wpErpOs_4',
'name': 'Daniela',
'country': [{ 'text':'Österreich','id':'3'}],
'flag':false
}
];
var dataSource = new kendo.data.DataSource({
transport: {
read: function(e){
e.success(data);
},
update:function(e){
e.success();
},
destroy: function(e){
e.success();
},
create: function(e){
e.success();
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { validation: { required: true } },
country: { type: "object" },
flag: { type: "boolean" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
toolbar: ["create"],
columns: [
{
field: "name",
title: "Name",
template: function(e) {return getTemplate(e, "name");}
}, {
field: "country",
title: "Country",
template: function(e) {return getTemplate(e, "country");}
}, {
field: "flag",
title: "Flag",
editor: wpErpOs_GridBoolean,
template: function(e) {return getTemplate(e, "flag");}
},
],
editable: "popup",
});
});
function wpErpOs_GridBoolean(container, options){
var guid = kendo.guid();
$('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
$('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container);
};
</script>
</div>
</body>
</html>
Since column is javascript object, could use a getter to build the template. This allows you to get values of other properties in object (e.g. field). (Self-references in object literals / initializers)
{
field: "country",
title: "Country",
get template() {
var fieldName = this.field;
return function(e) {
var tmp = "";
var guid = kendo.guid();
$.each(e[fieldName], function(key, value) {
tmp += '<span class="k-button" style="line-height:1.25em; cursor:default;">' + value.text + '</span>';
});
return tmp;
}
},
}
Since my formatting needs were simpler I just created a string template.
{
field: "Date",
get template() {
return "# if (" + this.field + ") { # #= kendo.toString(kendo.parseDate(" + this.field + ",'yyyy-MM-dd'), 'MM/dd/yyyy') # # } #"
}
}

Background color not appearing in free-jqGrid that is present in jqGrid 4.6.0

I am migrating existing jqGrid (4.6.0) to free-jqGrid (4.13.6 or later). Following two fiddles has same JavaScript and HTML – but one with 4.6.0 jqGrid and the other with free-jqGrid (4.13.6 for now)
jqGrid (4.6.0) Fiddle: https://jsfiddle.net/vth5wn64/2/
free-jqGrid (4.13.6) Fiddle: https://jsfiddle.net/vth5wn64/3/
The free-jqGrid does not have the required background color on the caption area. What is missing here? How to fix this?
JavaScript
function getCurrentPractice ()
{
return "Test";
}
function getGridCaption() {
return "<div style='font-size:15px; font-weight:bold; display:inline; padding-left:10px;'><span class='glyphicon glyphicon-check' style='margin-right:3px;font-size:14px;'></span>" + getCurrentPractice() + " " + "</div>" +
"<div style='float:right; padding-right:20px; padding-bottom:10px; display:inline;>" +
"<div style='float:right;width:550px; padding-bottom:20px;'>" +
"<input type='text' class='form-control' id='filter' placeholder='Search' style='width:250px; height:30px; float:right; ' />" +
" </div>" +
"</div>";
}
$(function () {
////Grid
var myData = [
{ "Practice": "Test1", "ProviderID": 1, "IsPartner": true, "IsActive": true },
{ "Practice": "Test2", "ProviderID": 2, "IsPartner": true, "IsActive": true }
]
var currentPractice = "P";
var grid = $("#list2");
grid.jqGrid({
datatype: 'local',
data: myData,
additionalProperties: ["IsActive", "IsPartner"],
//additionalProperties is needed since the name is different
postData:
{
practiceName: function () { return currentPractice }
},
colNames: [
'Practice',
'ProviderID'
],
colModel: [
{ name: 'Practice', width: 220 },
{ name: 'ProviderID', width: 320 }
],
ignoreCase: true,
loadonce: true,
rowNum: 25,
rowList: [15, 25, 35, 50],
pager: '#pager2',
viewrecords: true,
sortable: true,
caption: getGridCaption(),
beforeSelectRow: function (rowid, e) {
//Avoid selection of row
return false;
},
loadComplete: function () {
}
});
grid.jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
//Filter Toolbar
//grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
$("#advancedSearch").click(function () {
grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
});
//Top Search
$("#filter").on('keyup', function () {
var searchFiler = $("#filter").val(), f;
//alert(searchFiler);
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData, { filters: "" });
}
f = { groupOp: "OR", rules: [] };
f.rules.push({ field: "Practice", op: "cn", data: searchFiler });
grid[0].p.search = true;
$.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
grid.trigger("reloadGrid", [{ page: 1, current: true }]);
});
});
HTML
<div style="float:left;">
<div id="divGrid" style="width: 680px; min-height: 50px; float: left;">
<table id="list2"></table>
<div id="pager2"></div>
</div>
</div>
First of all, both demos uses classes glyphicon, glyphicon-check and form-control. Thus I suppose that you use Bootstrap CSS additionally to jQuery UI CSS.
I'm not sure, which exact layout you want to have, but one thing is definitively a problem. You use inner divs with float:right inside of the capture (title) div. It's well known that the classic alignment of blocks using float property has the problem. One solves it typically by including some helper element (for example one more div) which has clear: both;. jQuery UI CSS contains ui-helper-clearfix class, which simplifies applying float wrapping properties to parent elements.
In short, you need just add additional
<div class='ui-helper-clearfix'></div>
at the end on the content, which you insert in the caption of jqGrid. See https://jsfiddle.net/vth5wn64/5/

Message from webpage : datatables warning: table id

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>");
}
});
}

Resources