In my MVC project I have implemented JQuery datatables to retrieve data.I am using 1.9.4 jquery.dataTables.js. I have three filters to restrict the output in the table. Two of which works perfectly. However on the third option which suppose to show all records I receive "Undefined" pop up alert. I tried both in IE and Google chrome.
#{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Call log";
}
<link rel="stylesheet" href="~/Scripts/datatables/css/jquery.dataTables.css" />
<script type="text/javascript" src="~/Scripts/datatables/JS/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/datatables/JS/jquery.dataTables.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/json2.js"></script>
<script src="~/Scripts/json2.min.js"></script>
<script type="text/javascript">
$(function () {
GetUsers(1);
$('#select-filter').change(function () {
GetUsers($(this).val());
});
});
function GetUsers(filter) {
$.ajax({
url: '/home/GetAllUsers',
type: "POST",
cache: false,
data: JSON.stringify({ filter: filter }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (idata) {
DisplayDataTables(idata.aaData);
return;
},
error: function (idata) {
alert(idata.msg);
}
});
}
function DisplayDataTables(aDataSet) {
$('#divBRUsers').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tbl-users"></table>');
$('#tbl-users').DataTable({
"sPaginationType": "full_numbers",
"aaData": aDataSet,
"aoColumns": [
{
"sTitle": "Customer ID",
"sClass": "center",
"sName": "Employee ID",
"fnRender": function (oObj) {
return '' + oObj.aData[0] + '';
}
},
{ "sTitle": "Customer Name", "sClass": "left" },
{ "sTitle": "Customer Address", "sClass": "left" },
{ "sTitle": "Customer City", "sClass": "left" },
{ "sTitle": "Contacted Before", "sClass": "left" }
//{ "sTitle": "Campaign Name", "sClass": "center" }
]
});
}
</script>
<h2>#ViewBag.Title.</h2>
<div class="row">
<div class="div-add-campaign-form">
Filter <select class="dtSearch" id="select-filter">
<option value="1">Assigned to me</option>
<option value="2">Associated with my branch</option>
<option value="3">View all</option>
</select>
</div>
<div id="divBRUsers">
Please wait, loading data...
</div>
</div>
All right, consider the following object for your jquery dataTable instantiation:
var conf = {
columnDefs : [ { className : '...' }, targets : { 3, 6, 7} ],
columns: [
[ title : 'product id' ],
[ title : 'product name' ]
],
data : [
[ 23, "Cellular" ] // nested array, pay attention to the number of values added, 2 values, by order: productId, productName
],
order: [[0,'desc']], // first column set to desc, add a new value in the array to apply multi-order, values order matters!!
destroy : !0,
pageLength : 10,
paging : !0, // full number pagination is set as default
responsive : !0,
bSort : !0,
bSortable : !0,
bFilter : !1,
autoWidth : !1
};
As you can see, simply the object defines a table for apparently 2 columns 'productId', 'productName'; Adjust that to fit your case where it's gonna be a matter of adding values to the columns array, any extra config you wanna add to the columns you will have to add it to the columnDefs (short for columnDefinitions).
Remember, you will keep receiving errors similar to the one reported if the set of data doesn't match the columns. Make sure each nested array in the data array have the same number of values as for the columns, read the comments for more details. if for any reason, your data doesn't match that order, you gonna have to change that order manually, force empty values with '-' or 'n/a' values so all nested arrays have the same logic of values.
I hope this helps.
Good luck.
Related
I am working on datatable and facing this error :
DataTables warning: table id=table - Requested unknown parameter '0'
for row 0, column 0.
I have studied this link and it says that my table column defines in HTML doesn't match with the columns received from server. BUT in my case both are same.
Here is my HTML code :
<table id="table" class="display responsive nowrap" cellspacing="0" width="100%">
<thead style="background-color:#303641;">
<tr>
<th>aNumber</th>
<th>bNumber</th>
<th>cellID</th>
<th>dateTime</th>
<th>duration</th>
<th>imei</th>
<th>imsi</th>
<th>operatorId</th>
<th>mscId</th>
<th>fileId</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Datatable javascript code :
var dataTable = $('#table').DataTable({
"processing": true,
"serverSide": true,
"bFilter": false,
"iDisplayLength": configData,
dom: 'Bfrtip',
buttons: ['colvis', 'print', 'csv', 'excel', 'pdf'],
searching: false,
language: {
buttons: {
colvis: 'Show/Hide Columns'
}
},
"ajax": {
url: "getAdvanceCallAnalysisData.json",
data: function(d) {
return $.extend({}, d, {
"offset": 0,
"newRequest": newReq,
"totalRecords": total,
"lookInCol": "aNumber",
"lookInVal": "43543543",
"fromDate": from_date,
"toDate": to_date,
"callingCellId": "",
"CalledCellId": "",
"cdrType": "",
"smsType": "",
"durationFilter": "",
"selectColumns": "",
"sortCol": "",
"sortType": "",
});
},
type: "POST",
error: function() {
alert("error");
},
complete: function(data) {
total = data.responseJSON.recordsTotal;
newReq = 0;
test(total, newReq);
$("#loading_image").hide();
$(".show_datatable").show();
},
"aoColumns": [{
"mData": "aNumber"
}, {
"mData": "bNumber"
}, {
"mData": "cellID"
}, {
"mData": "dateTime"
}, {
"mData": "duration"
}, {
"mData": "imei"
}, {
"mData": "imsi"
}, {
"mData": "operatorId"
}, {
"mData": "mscId"
}, {
"mData": "fileId"
}]
}
});
you can see that my columns name and numbers match with the columns define in ajax response.
I have done same thing for another table and it was working fine but it shows error here. don't know why !!
json response : (It returns 15 records, I posted only two just to make it short)
{"msg":null,"code":null,"status":null,"data":[{"aNumber":"343","bNumber":"3434","cellID":"410-01-831-14770","dateTime":"2017-08-23 17:27:54.0","duration":419,"imei":"22380831696837","imsi":"35340311428389","operatorId":4,"mscId":"5","fileId":"4"},{"aNumber":"3434","bNumber":"5656","cellID":"410-07-1314-28271","dateTime":"2017-08-23 22:02:15.0","duration":785,"imei":"49776303943255","imsi":"35722667519554","operatorId":1,"mscId":"2","fileId":"5"}],"draw":1,"limit":1000,"recordsFiltered":12,"recordsTotal":12}
The most funny part is it shows the correct records and pagination even it display correct rows (with empty data) in datatable. This ajax call returns 15 records. Please see the image below :
Any idea, what is wrong here ?
I have a datatable which is getting populated by an ajax call. Following is the code:
oTable = $('#lenderList').dataTable(
{
bServerSide: true,
bProcessing: true,
searching: true,
sAjaxSource: "loanAdminAjax?ajax=true&searchCol="+$('#category').val(),
sServerMethod: 'POST',
sPaginationType: "full_numbers",
columnDefs:[
{
targets:8,
checkboxes:{
selectrow:true
}
}
],
aoColumns: [
{
"sName": "loanApplicationNumber",
mData: "loanApplicationNumber"
},
{
"sName": "name",
mData: "name"
},
{
"sName": "submissionDate",
mData: "submissionDate"
},
{
"sName": "kycEmailId",
mData: "kycEmailId"
},
{
"sName": "appVersion",
mData: "appVersion"
},
{
"sName": "documentStatus",
mData: "documentStatus"
},
{
"sName": "latestRemark",
mData: "latestRemark"
},
{
"sName": "appName",
mData: "appName"
},
{
nData: "salaryTransaction",
render: function ( salaryTransaction, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="editor-active">';
}
return salaryTransaction;
},
className: "dt-body-center"
}
],
dom: '<"button">lfrtip'
}
);
});
I have to consider all the loan application numbers of the respective rows whose checkboxes are checked by the user. So I can trigger an event on Click of a button but how can I get the values of Loan Application Number of those rows whose checkboxes are clicked.
I am new to javaScript. Please let me know how this can be achieved.
I have this idea : Loop through all the rows of the table, and test if the checkbox of that row is checked or not. If it is, then extract the value of the needed cell!
Try this :
$(document).ready(function(){
$("button").click(function(){
oTable = $("#lenderList").dataTable(); // Get the datatable,
var loanApplicationNumbers = []; // An array that will contain the "loan application numbers"
oTable.$('tr').each(function(index,rowhtml){ //Loop through the table rows
//Check the state of the checkbox
var checked= $('input[type="checkbox"]:checked',rowhtml).length;
if (checked==1){
//If the checkbox is checked, then add the inner text of the cell to the array
loanApplicationNumbers.push(rowhtml.children[1].innerText);
}
});
console.log(loanApplicationNumbers); //Do whatever you want
});
});
Note : rowhtml.children is an Array of cells in that row, if you want to get the value of the first cell, you should do rowhtml.children[0].innerText .
Row sum should calculated if price or quantity is changed.
Formatter is created according to How to access other row data from a cell's custom formatter in JqGrid
In inline and row editing modes row sum doesnt change.
Row sum column is read only and does not have id assigned. So it is difficult to create script to change it.
How to fix this so that row sum is calculated on edit ?
Testcase is in http://jsfiddle.net/ex6158L1/4/ containing
javascript
var serverResponse = {
"page": "1",
"records": "3",
"rows": [
{ "Id": "1", Quantity:4, Price : 23.33 },
{ "Id": "2", Quantity:4.55, Price : 76.66 }
]
},
$grid = $("#categorysummary");
function sumFmatter (cellvalue, options, rowObject) {
return options.rowData.Quantity *
options.rowData.Price;
}
$grid.jqGrid({
url: "/echo/json/", // use JSFiddle echo service
datatype: "json",
mtype: "POST", // needed for JSFiddle echo service
pager: '#pager',
postData: {
json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
},
//colNames: ["Quantity", "Price"],
colModel: [
{ name: 'Id', hidden: true },
{ name: 'Quantity', editable: true},
{ name: 'Price', editable: true },
{ name: "Sum", formatter: sumFmatter, editable: "readonly" }
],
jsonReader: {
id: 'Id',
repeatitems: false
},
sortname: 'Id',
viewrecords: true
})
.jqGrid("navGrid",'#pager')
.jqGrid("inlineNav",'#pager');
and css
<div class="container">
<div id="pager"></div>
<table id="categorysummary"></table>
</div>
The first problem, which you have, is the bug in free jqGrid, which follows that options.rowData was not filled inside of setRowData. I posted the corresponding fix to GitHub to eliminate the problem.
The next problem is the requirement to reformat the data of editable: "readonly". Form editing do this, but not inline editing. One can use either editable: "hidden" or to add the option
inlineEditing: {
extraparam: { Sum: "" }
}
which extend the results of inline editing with the dummy value "" for Sum column. It force reformatting of the value in the Sum column.
I would recommend you additionally to change the formatter sumFmatter which you use to
function sumFmatter (cellvalue, options, rowObject) {
var quantity = parseFloat(options.rowData.Quantity || 0),
price = parseFloat(options.rowData.Price || 0);
return (quantity * price).toFixed(2);
}
see the demo http://jsfiddle.net/OlegKi/ex6158L1/7/ or to
function sumFmatter (cellvalue, options, rowObject, action) {
var quantity = parseFloat(options.rowData.Quantity || 0),
price = parseFloat(options.rowData.Price || 0);
return $.fn.fmatter.call(this, "number", quantity * price,
options, rowObject, action);
}
where I called formatter: "number" to format the results of the multiplication (quantity * price).
See the resulting demo http://jsfiddle.net/OlegKi/ex6158L1/10/
I have table which contains a Name column but I don't want to show that column in the table but I need to add a search filter on it.
I tried using the below, but In this case the column and textbox of search filter both are not showing.
{
"sName": "Name",
"bVisible": false,
"bSearchable": true
}
When I set "bVisible": true then the text box of filter and column both are showing and also the search works fine.
I am using below code to display column filter.
HTML For Filter:
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="form-group">
<label class="col-sm-5 control-label">Customer Name </label>
<div class="col-sm-7" id="serName"></div>
</div><!-- form-group -->
</div>
HTML for Table :
Datatable Javascript After Update:
$(document).ready(function () {
dTable = $('#exRowTable').dataTable({
iDisplayLength: 10,
sAjaxSource: AjaxSource,
aoColumns: [
// {"sName": "Name", "bVisible": false, "bSearchable": true, "aTargets": [7]},
{"sName": "Name"}
],
aoColumnDefs: [
{
"bSearchable": true,
"bVisible": false,
"aTargets": [ 7 ]
}
],
"aaSorting": [[0, 'desc']],
sPaginationType: "full_numbers"});
$('#exRowTable').dataTable().columnFilter({
//sPlaceHolder: "head:after",
aoColumns: [
{type: "date-range", sSelector: "#serPickupDate"},
{type: "text", sSelector: "#serCustId"},
null,
null,
null,
null,
null,
{type: "text", sSelector: "#serName"}
],
bUseColVis: true
});
});
With version 1.9.4 of DataTables this works (jsFiddle)
$('#example').dataTable( {
"aoColumnDefs": [
{
"bSearchable": true,
"bVisible": false,
"aTargets": [ 2 ]
},
]
});
Maybe you are missing the aTargets parameter? If you are using aoColumns instead of aoColumnDefs, the array length needs to be equal to the number of columns (docs). I'm not sure if the sName parameter affects how this works...
Edit (to answer more detailed question):
I guess (from trying to replicate your problem here) that it is the columnFilter plugin that is not working. If you have hidden columns you have to set the bUseColVis parameter to true (docs). Like so:
$('#exRowTable').dataTable().columnFilter({
//sPlaceHolder: "head:after",
aoColumns: [
{ type: "date-range", sSelector: "#serPickupDate" },
{ type: "text", sSelector: "#serCustId" },
null,
null,
null,
null,
null,
{ type: "text", sSelector: "#serName"},
{ type: "select", sSelector: "#serTimeslotsId", values: TimeSlotsDP},
{ type: "select", sSelector: "#serPickUpPin", values: PincodeDp },
{ type: "select", sSelector: "#serDeliveryPin", values: PincodeDp },
{ type: "date-range", sSelector: "#serRequestDateTime" },
{ type: "select", sSelector: "#serPickedUpStatus", values: ['Yes','No'] },
{ type: "select", sSelector: "#serStaffUser", values: StaffUserDp }
],
bUseColVis: true
});
You can also do this via searching on a specific column:
$("#table").DataTable().column(0).data().search("example");
Because we have chained .data(), this will allow for indexing on column 0 even if visibility is set to false.
If you only want to search on visible columns, then omit the .data().
Scenario
I am using datatables (#version 1.9.4) for the first time to display data to the user.
I succeed in retrieving the data via ajax and in binding them to the datatable.
Now I want to add extra columns to let the user process the records. For semplicity sake, the aim is to add a button with an onclick handler that retrieve the data of the 'clicked' record.
In my plan I would bind the json item corresponding to the 'clicked' record to the onclick handler.
Till now, if I add an additional TH for the action column to the DOM, an error occurs from datatables code:
Requested unknown parameter '5' from data source for row 0
Question
How to set custom columns? How to fill their content with HTML?
Here is my actual config.
HTML
<table id="tableCities">
<thead>
<tr>
<th>country</th>
<th>zip</th>
<th>city</th>
<th>district code</th>
<th>district description</th>
<th>actions</th>
</tr>
</thead>
<tbody></tbody>
</table>
Javascript
$('#tableCities').dataTable({
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": true
, "bJQueryUI": true
, "bProcessing": true
, "bServerSide": true
, "sAjaxSource": "../biz/GetCitiesByZip.asp?t=" + t
});
Sample Json result
{
"aaData":
[
[
"IT",
"10030",
"VILLAREGGIA",
"TO",
"Torino"
],
[
"IT",
"10030",
"VISCHE",
"TO",
"Torino"
]
],
"iTotalRecords": 2,
"iTotalDisplayRecords": 2,
"iDisplayStart": 0,
"iDisplayLength": 2
}
Edit
Daniel is right. The solution is to set up the custom column in the aoColumnDefs, specifying the mData and the mRender properties. In particular mRender lets to define custom html and javascript.
/* inside datatable initialization */
, "aoColumnDefs": [
{
"aTargets": [5],
"mData": null,
"mRender": function (data, type, full) {
return 'Process';
}
}
]
You can define your columns in a different way
like this
"aoColumns": [
null,
null,
null,
null,
null,
{ "mData": null }
]
or this
"aoColumnDefs":[
{
"aTargets":[5],
"mData": null
}
]
Here some docs Columns
Take a look at this DataTables AJAX source example - null data source for a column
Note that prior to DataTables 1.9.2 mData was called mDataProp. The name change reflects the flexibility of this property and is consistent with the naming of mRender. If 'mDataProp' is given, then it will still be used by DataTables, as it automatically maps the old name to the new if required.
Another solution/workaround could be adding that '5' parameter...
For example adding extra "" to each row
like this:
[
"IT",
"10030",
"VILLAREGGIA",
"TO",
"Torino",
""
],
[
"IT",
"10030",
"VISCHE",
"TO",
"Torino",
""
]
Just in case anyone using a newer version of DataTables (1.10+) is looking for an answer to this question, I followed the directions on this page:
https://datatables.net/examples/ajax/null_data_source.html
Posting this answer here, just to show that where the aoColumnDefs needs to be defined. I got help from this question it self, but I struggled for a while for where to put the aoColumnDefs. Further more also added the functionality for onclick event.
$(document).ready(function() {
var table = $('#userTable').DataTable( {
"sAjaxSource": "/MyApp/proctoring/user/getAll",
"sAjaxDataProp": "users",
"columns": [
{ "data": "username" },
{ "data": "name" },
{ "data": "surname" },
{ "data": "status" },
{ "data": "emailAddress" },
{ "data" : "userId" }
],
"aoColumnDefs": [
{
"aTargets": [5],
"mData": "userId",
"mRender": function (data, type, full) {
return '<button href="#"' + 'id="'+ data + '">Edit</button>';
}
}
]
} );
$('#userTable tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
console.log(data);
$('#userEditModal').modal('show');
});
} );