Would Appreciate some assistance reviewing this code and letting me know what I may be doing wrong. I am using ajax with vb.net mvc to load data using json to the view. However, the table is not sorting to show by group.
var table = $("#TblGridInfo").DataTable({
scrollX: true,
processing: true, // for show progress bar
serverSide: true, // for process server side
filter: true, // this is for disable filter (search box)
orderMulti: true, // for disable multiple column at once
pageLength: 10,
responsive: true,
ajax: {
url: "/GenerateReport/LoadMCCProductionReport",
type: "POST",
datatype: "json",
},
columns: [
{ data: "MCC", "name": "MCC", "autoWidth": true },
{ data: "Branch", "name": "Branch", "autoWidth": true },
{ data: "MerchantProfileNum", "name": "MerchantProfileNum", "autoWidth": true },
{ data: "BusinessName", "name": "BusinessName", "autoWidth": true },
{ data: "MerchantCode", "name": "MerchantCode", "autoWidth": true },
{ data: "Months", "name": "Months", "autoWidth": true },
{ data: "TotalTrans", "name": "TotalTrans", "autoWidth": true },
{ data: "Volume", "name": "Volume", "autoWidth": true }
],
order: [[0, "asc"]],
rowGroup: {
dataSrc: "MCC"
}
});
Related
I have a table is using datatable and Ajax to get data on load.
const oTable = $('#product').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/ajax/admin/getproductlist/ajax.php",
"type": "POST"
},
"responsive": true,
"columnDefs": [
{
"targets": [-1],
"searchable": false,
"orderable": false
},
{
"targets": [1, 9, -2],
"width": "5%",
},
{
"targets": [1, -1],
"width": "10%",
},
{
"targets": [0, 2, 5, 6, 7, 8],
"width": "15%",
},
{
"targets": [3, 4],
"width": "30%",
"orderable": false, << This worked
"visible": false << DOESN't work
}
],
"columns" : [
{ "data": "sku" },
{ "data": "master" },
{ "data": "thumbs", "orderable": false }, << This worked
{ "data": "name", "orderable": false }, << This worked
{ "data": "name_fr", "visible" : false }, << DOESN't work
{ "data": "product_tags", "orderable": false }, << This worked
{ "data": "brand_tags", "orderable": false }, << This worked
{ "data": "label_tags", "orderable": false }, << This worked
{ "data": "mer_tags", "orderable": false }, << This worked
{ "data": "status", "orderable": false }, << This worked
{ "data": "quantity_in_stock" },
],
"initComplete": function(settings, json) {
$('#dataTables-list-Product_filter input').unbind();
$('#dataTables-list-Product_filter input').bind('keyup', function(e) {
if (e.keyCode == 13) {
oTable.search(this.value).draw();
}
});
$('#dataTables-list-Product_filter input').bind('change', function(e) {
oTable.search(this.value).draw();
});
},
});
I want to hide the columns when table finishes loading.
Let's take an example for name_fr. I tried to add visible: false to config option but somehow this column always shows up again after page stop loading. The orderable: false works fine.
I did add break point to debug the process. When table initialized, this column was hidden but after that something called it showing up again.
The column was only hidden when I click on checkbox that I make a function to show/hide.
$('input[id^="toggle_vis_"]').on('click', function(e) {
var column = oTable.column($(this).attr('data-column'));
$(this).val() == 1 ? column.visible(false) : column.visible(true);
});
So, I tried to but this to ready() function to hide column when page loaded.
$(document).ready(function() {
var column = oTable.column(4);
column.visible(false);
});
And...it didn't work as well. :(
Would you please give me an idea how can I solve this problem?
Thank you #andrewjames to help me find out my problem.
There was a conflict between orderable: false and responsive: true.
The option responsive: true brought back my columns when finishing loading.
Solution: Remove or edit responsive to false
var oTable = $('#Product').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/ajax/admin/getproductlist/ajax.php",
"type": "POST"
},
...
...
"responsive": false,
...
...
});
Cheers.
I am trying to use "Fixed columns" feature in datatables with remote data pulled using ajax. Everything works perfectly without any errors. However, the "Fixed columns" feature doesn't work. Below is my code
$('#dataTable').DataTable({
"order": [[ groupColumn, "asc" ]],
"rowReorder": true,
"dom": 'l<"toolbar">frtip',
"scrollX": true,
"bscrollCollapse": true,
"displayLength": 25,
"fixedColumns": true,
"columnDefs": [
{ "visible": false, "targets": groupColumn },
{ "orderable": true, "targets": groupColumn },
{ "orderable": false, "targets": "_all" }
],
"processing": false,
"pageLength": 60,
"ajax": {
url: "http://example.com/output",
type: 'post',
data: {id:id}
},
"columns": {
//column definitions provided here
}
});
Now suppose I have a json data formation like this following:
{
"ServiceName": "cacheWebApi",
"Description": "This is a CacheWebApiService",
"IsActive": true,
"Urls": [{ "ServiceAddress": "http://192.168.111.210:8200", "Weight": 5, "IsAvailable": true },
{ "ServiceAddress": ",http://192.168.111.210:8200", "Weight": 3, "IsAvailable": true }]
}
Now what worries me is that the "Urls" is another nested json formation. So how to bind this value to the datatables? And have you got any good ideas (e.g：something like I only wanna show all the ServiceAddress)...
This should do what you need:
var data = [{
"ServiceName": "cacheWebApi",
"Description": "This is a CacheWebApiService",
"IsActive": true,
"Urls": [
{
"ServiceAddress": "http://192.168.111.210:8200",
"Weight": 5,
"IsAvailable": true
},
{
"ServiceAddress": ",http://192.168.111.210:8200",
"Weight": 3,
"IsAvailable": true
}
]
}];
$(function() {
var table = $('#example').dataTable({
"data": data,
"columns": [
{
"data": "ServiceName"
}, {
"data": "Description"
}, {
"data": "IsActive"
}, {
"data": "Urls[0].ServiceAddress"
}, {
"data": "Urls[0].Weight"
}, {
"data": "Urls[0].IsAvailable"
}, {
"data": "Urls[1].ServiceAddress"
}, {
"data": "Urls[1].Weight"
}, {
"data": "Urls[1].IsAvailable"
}
],
});
});
You should put your data in an array though. Working JSFiddle
EDIT
IF the number of Urls isn't defined then you could do something like this:
var table = $('#example').dataTable({
"data": data,
"columns": [
{
"data": "ServiceName"
}, {
"data": "Description"
}, {
"data": "IsActive"
}, {
"data": "Urls",
"render": function(d){
return JSON.stringify(d);
}
}
],
});
I guess that that isn't brilliant but you could do almost anything to that function, for instance:
var table = $('#example').dataTable({
"data": data,
"columns": [
{
"data": "ServiceName"
}, {
"data": "Description"
}, {
"data": "IsActive"
}, {
"data": "Urls",
"render": function(d){
return d.map(function(c){
return c.ServiceAddress
}).join(", ");
}
}
],
});
I would like to insert JSON data into my table but I can make it to work, I keep getting error:
datatables requested unknown parameter 0 for row 0
var myTable = $('#my_logs').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true
});
$( "#getResults" ).click(function() {
$.ajax({
url: "http://www.myurl.com/data",
data: {
"from_date": from_date,
"to_date": to_date
},
type: "POST",
timeout: 30000,
dataType: "json", // "xml", "json"
success: function(logs) {
$.each(logs, function( index, value ) {
myTable.clear().draw();
myTable.row.add({
"Date": "1234",
"User Name": "1234",
"Class": "1234",
"Function": "1234",
"Action": "1234",
"Description": "1234"
}).draw();
});
},
error: function(jqXHR, textStatus, ex) {
alert(textStatus + "," + ex + "," + jqXHR.responseText);
}
});
});
The data I am getting from the AJAX respond it's something like that:
[
{
"log_time":"2015-12-27 09:42:21",
"user_name":"Me",
"class_name":"login",
"class_function":"authentication",
"action_title":"User login",
"action_description":"I am logged in"
},
{
"log_time":"2015-12-27 09:42:21",
"user_name":"me",
"class_name":"dashboard",
"class_function":"index",
"action_title":"Admin dashboard",
"action_description":"I am logged in"
}
]
You were nearly there. I was right about adding columns, see this working JSFiddle: https://jsfiddle.net/annoyingmouse/gx3ktawn/
Basically you need to tell the DataTable what to do with the data you give it, you also need to make sure you don't clear the data in each iteration of your response ;-).
Telling the DataTable the structure of your data also helps in taht you can add each row individually. You could also add the whole array as well (myTable.clear().rows.add(logs).draw();) rather than clear the table, iterate over the rows in your log and add each one and then draw the table.
var jsonData = [{
"log_time": "2015-12-27 09:42:21",
"user_name": "Me",
"class_name": "login",
"class_function": "authentication",
"action_title": "User login",
"action_description": "I am logged in"
}, {
"log_time": "2015-12-27 09:42:21",
"user_name": "me",
"class_name": "dashboard",
"class_function": "index",
"action_title": "Admin dashboard",
"action_description": "I am logged in"
}];
var myTable = $('#my_logs').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"data": [],
"columns": [{
"title": "Date",
"data": "log_time"
}, {
"title": "User Name",
"data": "user_name"
}, {
"title": "Class",
"data": "class_name"
}, {
"title": "Function",
"data": "class_function"
}, {
"title": "Action",
"data": "action_title"
}, {
"title": "Description",
"data": "action_description"
}]
});
$(document).ready(function() {
$("#getResults").click(function() {
$.ajax({
url: '/echo/json/',
data: {
json: JSON.stringify(jsonData)
},
type: "POST",
timeout: 30000,
dataType: "json", // "xml", "json"
success: function(logs) {
myTable.clear();
$.each(logs, function(index, value) {
myTable.row.add(value);
});
myTable.draw();
},
error: function(jqXHR, textStatus, ex) {
alert(textStatus + "," + ex + "," + jqXHR.responseText);
}
});
});
});
Hope that helps.
I am using the latest version Jquery DataTables.net, and have a table that display a total of 10 records per page, with a max count of 1004.
However, in the info bar, this reads:
Showing 1 to 5 of 1.004
the default of my table is as follows:
var oMessageDate = $("#messageDateDT").DataTable({
dom: "<'row'<'col-sm-12'<'pull-right'T><'pull-left'l>r<'clearfix'>>>t<'row'<'col-sm-12'<'pull-left'i><'pull-right'p><'clearfix'>>>",
stateSave: true,
pageLength: 10,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
columns: [
{ data: "MessageReference", sWidth: "15%" },
{ data: "Beneficiary" },
{ data: "Currency", sWidth: "5%" },
{ data: "Amount" },
{ data: "MessageDate", sWidth: "15%" },
{ data: "MessageType", sWidth: "5%" },
{ data: "Direction", sWidth: "5%"},
{ data: "Assigned", sWidth: "10%" },
{ data: "Status", sWidth: "17%" },
{ data: "Message" },
{ data: "MessageId", sWidth: "5%" },
{ data: "StatusCode" }
],
"autoWidth": false,
"pagingType" :"full_numbers",
language: {
"decimal": "-",
"thousands": ".",
"infoEmpty": "No entries to show",
"lengthMenu": "Display _MENU_ records",
"processing": "Loading data",
searchPlaceholder: "on everything",
"zeroRecords": "No records to display",
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
}
},
"columnDefs": [
{ "visible": false, "targets": 9 },
{ "visible": false, "targets": 10 },
{ "visible": false, "targets": 11 }
]
});
Can you please advise, how I can correct this.
Your screenshot shows
Showing 1 to 10 of 1.004 entries
And your default pageLength option is 10 which would give you 101 pages.