Here is my code. I tried to alert the data in a particular row, but I keep getting undefined error.
I tried to print aData using aData.toString(), I'm getting [object] [object] as response. how do I debug the contents of aData?
My Code:
$(document).ready(function() {
var table = $('#datatable').DataTable({
processing: true,
serverSide: false,
order: [[1, 'asc']],
"aoColumnDefs": [ { "sClass": "hide_me", "aTargets": [ 0 ], visible: false } ], // first column in visible columns array gets class "hide_me"
ajax: {
url: "/getData",
dataSrc: "list"
},
columns: [
{ data : "_id"},
{ data : "user.name" },
{ data : "student.name" },
{ data : "class" },
{ data : "status" },
],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
alert(aData.[4]);
if ( aData[4] == true )
{
$('td:eq(4)', nRow).html( '<b>On</b>' );
}
else {
$('td:eq(4)', nRow).html( '<b>Off</b>' );
}
},
responsive: true
});
});
Related
I am returning a nested list of json from an Ajax call and would like to populate my data table with this. F
or example: In my C# Class:
public class Product_Browser : Json_Response
{
public List<PRODUCT_TABLE> ProductData { get; set; }
public List<ProductPlans> ProductPlan { get; set; }
}
Javascript function:
$dtBrowser = $(dtElementID).dataTable({
filter: false,
serverSide: true,
processing: true,
responsive: true,
ajax: {
url: _Url,
type: "GET",
"dataSrc": function (jsonObj) {
console.log(jsonObj)
return jsonObj
}
},
columns: [
{ data: "ProductData.ProductKey", title:"Key", visible: true },
{ data: "ProductPlan.PlanID", title: "Id", visible: true },
],
order: [[1, "desc"]],
});
}
Now when i log the jsonObj it is valid JSON, but in my columns, data I don't know the correct way of accessing the two different lists of objects. I am able to do it for one list by changing the dataSrc to return jsonObj.ProductData but I need both pieces of data.
This is what my JSON looks like:
{
"ProductData": [
{
"ProductKey": 102234,
"ProductID": "TEST1",
},
{
"ProductKey": 102310,
"ProductID": "TEST2",
},
{
"ProductKey": 102319,
"ProductID": "TEST3",
},
],
"ProductGrabBagPlan": [
{
"PlanID": 1,
"ProductKey": 102234
},
{
"PlanID": 2,
"ProductKey": 102310
},
{
"PlanID": 3,
"ProductKey": 102319
},
],
"Success": true,
"Messages": [],
}
I am adding rows to a Datatable with the following code :
for (var key in itm) {
t.row.add([
null,
itm[key].itemcode,
itm[key].itemdesc,
itm[key].batch,
itm[key].expiry,
itm[key].qty,
itm[key].unit,
itm[key].rate,
itm[key].total,
itm[key].discper,
itm[key].discamt,
itm[key].staxper,
itm[key].staxamt,
itm[key].amount,
itm[key].netprate,
itm[key].salerate,
itm[key].page,
itm[key].sub1,
itm[key].sub2,
'<i class="fa fa-edit"></i>',
'<i class="fa fa-trash"></i>'
]).draw(false);
}
This is working fine except for the large data. When I try to add around 750 rows its too slow even the page hangs-up some times.
I tried to add the data using rows.add() API but its not working, the table is blank. Here is the code i am using to add bulk data.
var t = $('#productTable').DataTable();
t.rows.add(itm);
My datatable definition is as under :
$('#productTable').DataTable({
"paging": false,
"ordering": false,
"searching": false,
"info": false,
"rowHeight": '100px',
"scrollY": "200px",
"scrollX": true,
"scrollCollapse": true,
"paging": false,
"columns": [
{ data: null },
{ data: 'itemcode' },
{ data: 'itemdesc' },
{ data: 'batch' },
{ data: 'expiry' },
{ data: 'qty' },
{ data: 'unit' },
{ data: 'rate' },
{ data: 'total' },
{ data: 'discper' },
{ data: 'discamt' },
{ data: 'staxper' },
{ data: 'staxamt' },
{ data: 'amount' },
{ data: 'netprate' },
{ data: 'salerate' },
{ data: 'page' },
{ data: 'sub1' },
{ data: 'sub2' },
{ data: null },
{ data: null },],
"columnDefs": [
{ className: "dt-right", "targets": [7,8,9,10,11,12,13] },
{ "targets": varbatchcol, visible: false },
{ "targets": vardisccol, visible: false },
{ "targets": vartaxcol, visible: false },
{ "targets": vartotcol, visible: false },
{ "targets": [17,18], visible: false },
],
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
}
});
and the data coming from server is :
Found the problem.
t.rows.add(itm);
should be
t.rows.add(itm).draw();
And this also solved the slow populating issue.
I want to hide a record on Grid that returns from server.
I've setted a filter on store and can reach that specific data but how I'll handle to hide/ignore this record?
fooStore: {
....
filters: [
function(item) {
let me = this;
let theRecord = item.data.status === MyApp.STATUS; //true
if (theRecord) {
console.log(theRecord); //True
console.log("So filter is here!!")
//How to hide/ignore/avoid to load this specific data record to load Grid??
}
}
]
},
Returned JSON;
{
"success": true,
"msg": "OK",
"count": 3,
"data": [
{
//Filter achives to this record and aim to hide this one; avoid to load this record.
"id": 102913410,
"status": "P"
},
{
"id": 98713410,
"status": "I"
},
{
"id": 563423410,
"status": "A"
}
]
}
I can't save my fiddle cause i don't have sencha forum's account so i give you my code :
Ext.application({
name : 'Fiddle',
launch : function() {
var model = Ext.create('Ext.data.Model', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'status', type: 'string'},
]
});
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: model,
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
filters: [function(item) {
if (item.data.status === "P") {
return true;
}
else {
return false;
}
}],
listeners: {
load: {
fn: function() {
console.log(this.getRange());
}
}
}
});
}
});
Also i create data.json like this :
{
"success": true,
"msg": "OK",
"count": 3,
"data": [{
"id": 102913410,
"status": "P"
}, {
"id": 98713410,
"status": "I"
}, {
"id": 563423410,
"status": "A"
}]
}
I thinks it's near to you'r code and after the loading of the store the filter work as you can this :
Here is sencha fiddle link : https://fiddle.sencha.com/#view/editor
If this can't work, i don't understand what the fuck doing...
Here is my existing JS code:
var CategoriesTablewithFilter = function(){
var table = $('#catDatatable');
var url = $('#url').val();
var tableObj = table.DataTable( {
"serverSide": true,
"responsive": true,
"aoColumnDefs": [
{ "bSearchable": true, "aTargets": [ 1 ] },
],
ajax:
{
url: url,
dataSrc: 'data',
},
columns: [
{ data: 'id'},
{ data: 'name'},
{ data: 'status'},
],
} );
}
Status is a Boolean field which returns 1 or 0.
Is there anyway I can change 1, 0 to Strings - Active/InActive
You should use render function for column:
var CategoriesTablewithFilter = function () {
var table = $('#catDatatable');
var url = $('#url').val();
var tableObj = table.DataTable({
"serverSide": true,
"responsive": true,
"aoColumnDefs": [
{"bSearchable": true, "aTargets": [1]},
],
ajax:
{
url: url,
dataSrc: 'data',
},
columns: [
{data: 'id'},
{data: 'name'},
{data: 'status', render: function (data, type, row, meta) {
return data == 1 ? 'Active' : 'InActive';
}}
],
});
}
Try debugging you ajax response using console.log(data) output to fetch status's value and use render function to display render the final output.
columns: [
{ data: 'id'},
{ data: 'name'},
{
data: 'status',
render: function (data, type, full, meta) {
return full.status == true ? 'Active' : 'Inactive';
}
}
]
Or you could use
columns: [
{ data: 'id'},
{ data: 'name'},
{
data: 'status',
render: function (data, type, full, meta) {
return data === '1' ? 'Active' : 'Inactive';
}
}
]
I am getting below error as Ajax call response.
Below is the response body for Ajax call.
Apache Tomcat/7.0.61 - Error report
HTTP Status 500 - org.apache.struts.chain.commands.InvalidPathException: No action config found for the specified url.type Status reportmessage org.apache.struts.chain.commands.InvalidPathException: No action config found for the specified url.description The server encountered an internal error that prevented it from fulfilling this request.Apache Tomcat/7.0.61
Is it something to do with JRE 7?
Here is the JavaScript code from my JSP file.
I have defined a table in my JSP file which is referenced here.
function showLogHistory() {
var questionId = document.getElementById('txtQuestionId').innerHTML;
var url = "myAction.do?dispatchMethodName=showmyAudit&questionId="+questionId;
if ( $.fn.DataTable.isDataTable('#tblmyAudit') ) {
$('#tblmyAudit').DataTable().destroy();
}
$('#tblmyAudit').DataTable( {
"initComplete": function(settings, json) {
$("#tblmyAudit tbody tr.data-in-table").each(function () {
var i=0;
$(this).find('td').each(function (index) {
var currentCell = $(this);
var nextCell =
$(this).closest('tr').next('tr').find('td').eq(i).length > 0 ?
$(this).closest('tr').next('tr').find('td').eq(i) : null;
if ( currentCell.text() !== nextCell.text()) {
currentCell.css('backgroundColor', 'yellow');
}
i=i+1;
});
});
},
"ajax": {
"url": url,
"cache": true
},
"columns": [
{ "data": "questionId" },
{ "data": "Category" },
{ "data": "Area" },
{ "data": "question" },
{ "data": "answer" },
{ "data": "updated_by" },
{ "data": "updated_date" }
],
"scrollX": true,
"columnDefs": [ {
"targets": [ '_all' ],
"orderable": false
} ],
"createdRow": function( row, data, dataIndex ) {
$(row).addClass( 'data-in-table' );
}
} );
$('#detmyAudit').modal('show');
}
URL that gets generated for Ajax seems proper.