I'm having problems display data in datatables, if I put the array straight in like this it works
$.parseJSON("[[\"1\",\"New Zealand\",\"20\"],[\"2\",\"Australia\",\"30\"]]");
but when I do it using a variable it doesn't it says read the error docs https://datatables.net/manual/tech-notes/4
I don't understand what's going on here
var self = this;
var data = $.parseJSON(self.model.get('shipping'));
// data is in this format [["1","New Zealand","20"],["2","Australia","30"]]
var intfreight = $('#edit-int-freight').DataTable(
{
//"aoColumnDefs": [{ "aTargets": [ 2 ] }] ,
'columnDefs': [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
}
],
data: data,
columns: [
{ title: 'id' },
{ title: 'country', searchable: true},
{ title: 'shipping_rate',
render: function (data, type, row) {
return '$' + data;
}},
{ title: 'action', orderable: false, searchable: false, render: function() {
return '<a class="delete" href="#edit/delete-freight">Delete</a>';
}}
]
});
Related
I am using socket to receive the json data from my backend. I am receiving the data in the DATA variable and want to iterate it into the ajax datatable. Here is my code.
`
socket.on('getinvoices', (data) => {
var table = $('#table1').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
order: false,
ajax: {
url : "https://testdma.tech-east.com.pk/dma/invoices/getAllInvoices",
dataSrc: "doc",
order: [[0]],
},
columns: [
{ data: 'recipientName' },
{ data: 'recipientAddress' },
{ data: 'recipientPhoneNumber' },
{ data: 'recipientEmail' },
{ data: 'services[/ ].serviceName' },
{ data: 'services[/ ].servicePrice' },
{
data: null,
className: "dt-center editor-delete",
orderable: true,
"mRender" : function ( data, type, row ) {
return '<button class="btn viewbtn" value=' +data._id +'>Edit</button>';
}
},
{
data: null,
className: "dt-center editor-delete",
orderable: true,
"mRender" : function ( data, type, row ) {
return '<button class="btn viewbtn2" value=' +data._id +'>Print Invoice</button>';
}
}
],
});
The data variable on in the socket is where I am receiving my data into.
I tried putting the DATA instead of URL into the ajax datatable but it didnt worked.Kindly guide me how can i populate table with that data
I'm pretty sure to populate a jQuery DataTable with data from a socket event, you can use the ajax.reload() method to update the table's data. Here is an example of how you could do this:
// Define the table
var table = $('#table1').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
order: false,
columns: [
{ data: 'recipientName' },
{ data: 'recipientAddress' },
{ data: 'recipientPhoneNumber' },
{ data: 'recipientEmail' },
{ data: 'services[/ ].serviceName' },
{ data: 'services[/ ].servicePrice' },
{
data: null,
className: "dt-center editor-delete",
orderable: true,
"mRender" : function ( data, type, row ) {
return '<button class="btn viewbtn" value=' +data._id +'>Edit</button>';
}
},
{
data: null,
className: "dt-center editor-delete",
orderable: true,
"mRender" : function ( data, type, row ) {
return '<button class="btn viewbtn2" value=' +data._id +'>Print Invoice</button>';
}
}
]
});
// Handle the 'getinvoices' socket event
socket.on('getinvoices', (data) => {
// Update the table data with the data from the socket event
table.ajax.reload(null, false);
});
You can also specify the data source and other options for the table by passing an object to the ajax.reload() method.
table.ajax.reload({
url: "https://testdma.tech-east.com.pk/dma/invoices/getAllInvoices",
dataSrc: "doc",
order: [[0]],
});
I am trying below code for editing the datatable using custom fields in jquery and it is giving me this "fn.dataTable.Editor is not a constructor" error. Please suggest any other workaround
Below are the JavaScript libraries loaded:
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js
https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js
../../extensions/Editor/js/dataTables.editor.min.js
Code:
<script>
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor({
table: "#example",
fields: [{
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Salary:",
name: "salary"
}]
});
// Activate an inline edit on click of a table cell
$('#example').on('click', 'tbody td.editable', function(e) {
editor.inline(this);
});
$('#example').DataTable({
dom: 'Bfrtip',
columns: [{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: 'first_name', className: 'editable' },
{ data: 'last_name', className: 'editable' },
{ data: 'position' },
{ data: 'office' },
{ data: 'start_date' },
{ data: 'salary', render: $.fn.dataTable.render.number(',', '.', 0, '$'), className: 'editable' }
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]
});
});
</script>
I am currently maintenance on some project using Datatables:
I found a problem when export the column that is successfully displayed on page failed to display after use render as below :
this._dataTable = this.$mainTable.DataTable({
ajax: {
url: this.url,
dataSrc: ''
},
dom: 'Bfrtip',
fixedColumns: {
leftColumns: 3,
rightColumns: 1
},
orderable: false,
rowId: 'fsId',
scrollX: true,
scrollCollapse: true,
columns: [{
className: 'input-cell',
data: 'stadate',
render(data) {
const time = data ? moment(data).format('HH:mm DD-MM-YYYY') : '';
return time;
},
width: '100px'
},
{
className: 'input-cell',
data: 'slotTime',
render(data) {
const time = data ? moment(data).format('HH:mm') : '';
return `<input name="slotTime" class="form-control" data-time value="${time}" size="5" readonly>`;
},
width: '72px'
},
],
buttons: [{
extend: 'print',
customize: function(win) {
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}]
});
Data in column stadate can be displayed successfully, both on webpage and export page, but data slotTime successfully displays on webpage only.
Appreciate for any solution to fix it.. regards
finally, I can found sollution from here Datatables - Export values inside and outside the field input and value of the select field and here my final code :
this._dataTable = this.$mainTable.DataTable({
ajax: {
url: this.url,
dataSrc: ''
},
dom: 'Bfrtip',
fixedColumns: {
leftColumns: 3,
rightColumns: 1
},
orderable: false,
rowId: 'fsId',
scrollX: true,
scrollCollapse: true,
columns: [{
className: 'input-cell',
data: 'stadate',
render(data) {
const time = data ? moment(data).format('HH:mm DD-MM-YYYY') : '';
return time;
},
width: '100px'
},
{
className: 'input-cell',
data: 'slotTime',
render: function (data, type, row) {
const time = data ? moment(data).format('HH:mm') : '';
return type === 'export' ? time : `<input name="slotTime" class="form-control" data-time value="${time}" size="5" readonly>`;
},
width: '72px'
},
],
buttons: [{
extend: 'print',
exportOptions : {
orthogonal: 'export',
},
}]
});
thx all
I have a shield-ui grid with a hidden column. Once I modify the data source ie perform a filter or do a sort my column sizes get messed up.
My problem can be seen on the demo website as well
Just sort the grid no problem, then hide a column and sort again and you will see the issue
https://demos.shieldui.com/aspnet/grid-columns/columns-show-hide
jQuery(function($) {
$("#grid").shieldGrid({
dataSource: {
data: gridJson
},
sorting: {
multiple: true
},
paging: {
pageSize: 5,
pageLinksCount: 4
},
selection: {
type: "row",
multiple: false,
toggle: true
},
columns: [
{ field: "ServiceMarketingId", title: "ServiceMarketingId", width:"20%" },
{ field: "Code", title: "Code" , width:"20%"},
{ field: "Name", title: "Name", width:"20%" },
{ field: "MarketingName", title: "MarketingName", width:"20%" },
{ field: "Description", title: "Description" , width:"20%"}
],
resizing: true
});
var dataSource = $("#grid").swidget().dataSource,
timeout;
$("#searchInput").on("keyup", function() {
var val = $(this).val();
console.log(val);
clearTimeout(timeout);
timeout = setTimeout(function() {
dataSource.filter = dataSource.filter = {
or: [
{ path: "Code", filter: "contains", value: val },
{ path: "Name", filter: "contains", value: val }
]
}
dataSource.read();
}, 300);
});
$("#grid").swidget().hideColumn("ServiceMarketingId");
});
The Shield UI developers are working on fixing this bug and a fix should be available shortly.
I want to get Datatables column's value. Here is my datatables script:
$(function () {
$('#kategoriTable').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"scrollX": false,
"ajax": {
"url" : "kugi/getDataKategori",
"dataSrc" : function(json) {
console.log(json);
return json.ProposalCategories
}
},
"columns": [
{ "data": "CategoryId"}, // I want to get this value, and then use it to edit the data
{ "data": "Name"},
{ "data": "Code"},
{ "data": "TypeName"},
{ "data": "IsAbstract"},
{ "data": "DefSrcOrganisationName"},
{ "data": null,
"bSortable": false,
"mRender": function (o) { return '<button class="btn btn-success btn-xs">Edit</button>'; }
}
]
});
});
After that I want to send this value to this code
return '<button class="btn btn-success btn-xs">Edit</button>'
How can I get the value of CategoryId then put it to XXXX ?
Thanks before.
You are close - you actually have access to all column values through the row param :
columns: [
{ data: "CategoryId" },
{ data: "Name" },
{ data: "Code" },
{ data: "TypeName" },
{ data: "IsAbstract" },
{ data: "DefSrcOrganisationName" },
{ data: null,
sortable: false,
render: function(data, type, row) {
return '<a href="kugi/edit_usulan_kategori/'+row.CategoryId+'">'+
'<button class="btn btn-success btn-xs">Edit</button></a>'
}
}
]
documentation here -> https://datatables.net/reference/option/columns.render