I'm using the jQuery DataTables plugin. I'd like to create a Datatables rowgroup by column1 and sorting single groups by column2. However when I sort column2, rowgroup doesn't work
var table = $('#DT_StatMov').DataTable({
"ajax": {
"url": url,
"type": "POST",
"datatype": "json"
},
"columns": [{
"data": "Name"
}, {
"data": "Product"
}, {
"data": "Date",
"render": function(data) {
return moment(data).format('D/M/Y');
}
}],
"orderFixed": [1, 'asc'],
"order": [2, 'desc'],
rowGroup: {
startRender: null,
endRender: function(rows, group) {
return group + ' (' + rows.count() + ')';
},
dataSrc: 'Product'
},
"scrollCollapse": true,
"search": {
"caseInsensitive": true,
},
"ordering": false,
"processing": true
});
Related
I have ASP.NET Code that use JS for datatable for views. And i do some repetiting code because i have 3 tables (in this case) that i have same columns. just the data(json) that different i have got from controller.
Here's the JS Code
<script type="text/javascript">
function parseDate(date) {
if (!date) {
return ""
}
return new Date(parseInt(date.substr(6))).toLocaleString();
}
$(document).ready(function() {
$.ajax({
"url": "#Url.Action("GetAllByUserToday", "Dashboard")",
"type": "GET",
"datatype": "json",
"success": function(res) {
const mapped = res.data.map((dt) => {
return {
...dt,
CreatedDate: parseDate(dt.CreatedDate),
Status: dt.Status ? "Sukses" : "Gagal",
IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
};
});
$("#getAllToday").DataTable({
"data": mapped,
"dom": 'Bfrtip',
"buttons": ['copy', 'excel'],
"columns": [
{ "data": "Nama" },
{ "data": "NoHP" },
{ "data": "Content" },
{ "data": "Sender" },
{ "data": "IsUsingTemplate" },
{ "data": "Status" },
{ "data": "CreatedDate" }
],
columnDefs: [{ 'targets': 0, type: 'date-euro' }],
order: [0, 'desc'],
});
}
});
$("#getAll_wrapper").addClass("w-100");
});
$(document).ready(function() {
$.ajax({
"url": "#Url.Action("GetAllSentByUserToday", "Dashboard")",
"type": "GET",
"datatype": "json",
"success": function(res) {
const mapped = res.data?.map((dt) => {
return {
...dt,
CreatedDate: parseDate(dt.CreatedDate),
Status: dt.Status ? "Sukses" : "Gagal",
IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
};
});
$("#getAllSentToday").DataTable({
"data": mapped,
"dom": 'Bfrtip',
"buttons": ['copy', 'excel'],
"columns": [
{ "data": "Nama" },
{ "data": "NoHP" },
{ "data": "Content" },
{ "data": "Sender" },
{ "data": "IsUsingTemplate" },
{ "data": "Status" },
{ "data": "CreatedDate" }
],
columnDefs: [{ 'targets': 0, type: 'date-euro' }],
order: [0, 'desc'],
});
}
});
});
$(document).ready(function() {
$.ajax({
"url": "#Url.Action("GetAllFailedByUserToday", "Dashboard")",
"type": "GET",
"datatype": "json",
"success": function(res) {
const mapped = res.data.map((dt) => {
return {
...dt,
CreatedDate: parseDate(dt.CreatedDate),
Status: dt.Status ? "Sukses" : "Gagal",
IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
};
});
$("#getAllFailedToday").DataTable({
"data": mapped,
"dom": 'Bfrtip',
"buttons": ['copy', 'excel'],
"columns": [
{ "data": "Nama" },
{ "data": "NoHP" },
{ "data": "Content" },
{ "data": "Sender" },
{ "data": "IsUsingTemplate" },
{ "data": "Status" },
{ "data": "CreatedDate" }
],
columnDefs: [{ 'targets': 0, type: 'date-euro' }],
order: [0, 'desc'],
});
}
});
});
</script>
Can I reduce the repetition for these code. If can, please help me. So I can try to apply for another page that has same issue. Thank you.
Update, suggestion from #Roamer-1888 finally I try this and it works!
function renderTable(action, tableId) {
$.ajax({
"url": action,
"type": "GET",
"datatype": "json",
"success": function(res) {
const mapped = res.data.map((dt) => {
return {
...dt,
CreatedDate: parseDate(dt.CreatedDate),
Status: dt.Status ? "Sukses" : "Gagal",
IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
};
});
$(tableId).DataTable({
"responsive": true,
"lengthChange": false,
"autoWidth": false,
"data": mapped,
"dom": 'Bfrtip',
"buttons": ['copy', 'excel'],
"columns": [
{ "data": "Nama" },
{ "data": "NoHP" },
{ "data": "Content" },
{ "data": "Sender" },
{ "data": "IsUsingTemplate" },
{ "data": "Status" },
{ "data": "CreatedDate" }
],
columnDefs: [{ 'targets': 0, type: 'date-euro' }],
order: [0, 'desc'],
});
}
});
}
$(document).ready(function() {
renderTable("#Url.Action("GetAllByUser", "Dashboard")", "#getByUser")
renderTable("#Url.Action("GetAllSentByUser", "Dashboard")", "#getSentByUser")
renderTable("#Url.Action("GetAllFailedByUser", "Dashboard")","getFailedByUser")
});
In my ajax datatable I have this initialized:
"ajax": {
"url": "{{ route('cust_continfo_data_table') }}",
"dataType": "json",
"type": "POST",
"data": {
_token: "{{ csrf_token() }}",
cust_id_copy: $("#cust_id_copy").val()
}
},
"columnDefs": [{
'targets': 4,
'createdCell': function (td, cellData, rowData, row, col) {
$(td).attr('title', 'columns');
}
}
],
"columns": [{
"data": "id"
}, {
"data": "receipt_date"
}, {
"data": "info_division_name"
}, {
"data": "contact_status"
}, {
"data": "note"
}, {
"data": "created_at"
}, {
"data": "updated_at"
}
],
As you can see, I only have static value assigned which is column in:
$(td).attr('title', 'columns');
How can I add the dynamic value from "data":"note" ?
The rowData object should have the property note
'createdCell': function (td, cellData, rowData, row, col) {
$(td).attr('title', rowData.note);
}
I have done following code and now iI want to add edit column in Bootstrap Datatable with server side functionality in MVC and Bootstrap. Finally I want proper CRUD operation, so how can I approach for this?
<script type="text/javascript">
var assetListVM;
$(function () {
assetListVM = {
dt: null,
init: function () {
dt = $('#assets-data-table').DataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": "#Url.Action("Get","Asset")"
},
"columns": [
{ "title": "ID", "data": "ID", "searchable": true },
{ "title": "Name", "data": "Name", "searchable": true },
{ "title": "City", "data": "City", "searchable": true },
{ "title": "EmpCode", "data": "EmpCode", "searchable": true },
{ "title": "DOJ", "data": "DOJ", "searchable": true },
{ "title": "Address", "data": "Address" },
{ "title": "DOB", "data": "DOB" }
],
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
});
}
}
// initialize the datatables
assetListVM.init();
});
</script>
[{"name":"aaa","firstname":"bbb","lastname":"ccc"},
{"name":"qqq","firstname":"eee","lastname":"mmm"},
{"name":"www","firstname":"ooo","lastname":"lll"}]
I am making ajax request to server, its returning the above json data.But i >am getting the json parse error
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "http://example",
"dataType": "jsonp",
"columns": [
{ "data": "name"},
{ "data": "firstname" },
{ "data": "lastname" }
]
}
} );
});
Your ajax attribute should not contain the column attribute.:
Code:
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "http://example",
"dataType": "jsonp"
},
"columns": [
{ "data": "name"},
{ "data": "firstname" },
{ "data": "lastname" }
]
} );
});
Can anyone explain why TableTools (http://datatables.net/extensions/tabletools/) not show up.
I'm using the following js sources:
<script src="external/jquery/jquery.js"></script> //Version 1.10.2
<script src="jquery-ui.js"></script> //Version 1.11.2
<script src="jquery.dataTables.js"></script> // Version 1.10.4
<script src="dataTables.tableTools.js"></script> //Version 2.2.3
Thats the js for the datatable and tabletools.
$('#report-datatable').dataTable({
"processing": true,
"serverSide": false,
"paging": false,
"ajax": {
type: 'POST',
url: 'sources/report_table.php',
data: {
miDate: minval,
maDate: maxval,
retour: sap_retour,
hubew: sap_hubew,
nolkscan: nolkscan
}
},
"columns": [
{ "data": "LSAP" },
{ "data": "DatumSAP" },
{ "data": "Warenempfaenger" },
{ "data": "LSLK" },
{ "data": "DatumLK" }
],
"createdRow": function (row, data, index) {
if (data['LSLK'] == null){
$(row).css('background-color', 'lightcoral');
}
},
"dom": 'T<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"TableTools": {
"Buttons": [
"print",
{
"Extends": "collection",
"ButtonText": "Save",
"Buttons": [ "csv", "xls", "pdf" ]
}
]
},
"destroy": true
});
Everything works exprect the tabletools.
Thanks!
Solution:
$(document).ready(function() {
var report1table = $('#report1-datatable').dataTable();
function reporttable(minval,maxval,sap_retour,sap_hubew,nolkscan){
$.ajax({
type: 'POST',
url: 'sources/report_table_scans.php',
data: {
miDate: minval,
maDate: maxval,
retour: sap_retour,
hubew: sap_hubew,
nolkscan: nolkscan
},
success: function(result){
obj = JSON.parse(result);
loadDatatable(obj['data']);
},
error: function (result) {
alert('Fehler beim Laden der Daten. ' + result.responseText);
}
});
};
function loadDatatable(aaData){
report1table.dataTable({
"dom": 'Tti',
"deferRender": true,
"serverSide": false,
"paging": false,
"data": aaData,
"columns": [
{ "data": "LSAP" },
{ "data": "DatumSAP" },
{ "data": "Warenempfaenger" },
{ "data": "LSLK" },
{ "data": "DatumLK" }
],
"createdRow": function (row, data, index) {
if (data['LSLK'] == null){
$(row).css('background-color', 'lightcoral');
}
},
tableTools: {
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
},
"destroy": true
});
};