Using the jQuery dataTables plugin, I have the following rendering a table (code within each render has been simplified for brievity):
table = $('#index')
.DataTable({
order: [[1, 'desc']],
autoWidth: false,
lengthChange: false,
pageLength: numRows,
ajax: {
url: 'GetTableData/' + application,
dataSrc: ''
},
columns: [
{
data: null,
render: function (data, type, row) {
return '<span></span>';
}
},
{
data: null,
render: function (data, type, row) {
return '<span></span>';
}
},
{
data: null,
render: function (data, type, row) {
return '<span></span>';
}
},
{
data: null,
render: function (data, type, row) {
return '<span></span>';
}
}
]
});
No matter what column number or direction I set the order: [[1,'desc']] to, it always sorts column 1 asc.
Where am I having a disconnect in my code?
Related
I'm displaying all the customer data using DataTables like this:
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<script>
var theTable = null;
$(document).ready(function() {
theTable = $('#table-customer').DataTable({
"processing": true,
"serverSide": false,
"ordering": true,
"order": [[ 0, 'asc' ]],
"ajax":
{
"url": "http://localhost/myshop/showdata.php",
"type": "GET"
},
"sAjaxDataProp": "data",
"deferRender": true,
"aLengthMenu": [[5, 10, 20, 50],[ 5, 10, 20, 50]],
"columns": [
{ data: "cust_id" },
{ data: "cust_name" },
{ data: "cust_addr" },
{ data: "cust_email" },
{ data: "cust_phone" },
{ data: "cust_photo", sortable: true, render: function (o) { return '<button id="btn1" onclick="displayImage(data)">Show</button>';}
]
});
});
function displayImage(link){
window.alert(link);
}
</script>
All information is displayed properly, except 1 thing: if you click any button on "customer photo" column, instead of showing an alert which shows its URL, nothing happens. Inspecting the page showed me this:
Uncaught ReferenceError: data is not defined
at HTMLButtonElement.onclick (view.html:1)
How to fix this?
The columns.data render function builds a string which is returned:
function (o) { return 'your string here, including data value'; }
You have to (a) concatenate your data variable with the string literals you need; and (b) use the variable name you provided - I will use data instead of o:
function (data) { return 'your string here, including ' + data + ' value'; }
So, if we provide all the possible parameters allowed in the renderer, that becomes:
{
"data": "cust_photo",
"sortable": true,
"render": function(data, type, row, meta) {
return '<button id="btn1" onclick="displayImage(\'' + data + '\')">Show</button>';
}
}
I use \' to ensure the value of the data variable is surrounded in single quotes.
(Note that in your question, the code is also missing a closing }.)
But to avoid potential issues with sorting and filtering, these column data render functions need to account for DataTable's use of orthogonal data.
The type parameter can be used for this:
{
"data": "cust_photo",
"sortable": true,
"render": function(data, type, row, meta) {
if (type === 'display') {
return '<button id="btn1" onclick="displayImage(\'' + data + '\')">Show</button>';
} else {
return data; // type is for sorting or filtering - just use the raw value
}
}
}
I would like to understand how to multiply column values and apply style in Datatables.
Currently my columns section looks like this :
"columns": [
{ data: "id" },
{ data: "brand" },
{ data: "description" },
{ data: "nb_ref" },
{ sortable : false, data: "cost", render: $.fn.dataTable.render.number( ' ', '.', 2, '€' ) },
]
what I would like in the 5th column is to multiply the "cost" by the "nb_ref" (the value of the 4th column) and still apply the number format.
Any idea about how to achieve ?
thanks
Adam
looking at this answer I think you can do it like this
"columns": [
{ data: "id" },
{ data: "brand" },
{ data: "description" },
{ data: "nb_ref" },
{ sortable : false, data: "cost", render: function (data, type, row, meta) {
var nb_ref = row['nb_ref'];
var cost = row['cost'];
var total = nb_ref * cost;
return $.fn.dataTable.render.number( ' ', '.', 2, '€' ).display(total);
}
},
]
I have a datatable that has an edit button on each row. When I click the edit button, a function opens a modal to display the data of the selected record.
Initially, I just want to get the id(which I referred to as PID) of the selected record. However according to my code, I am not sure how to extract the value passed. I kept on getting undefined response.
Please advise on any errors in my code or is there a better way to do this.
Thanks
select: true,
ajax: {
url: "people-grid-data.php",
type: "POST",
},
columnDefs: [{
"targets": [3, 4, 6, 7, 8, 9],
"visible": false,
"searchable": true
},
],
columns: [
{
"width":"2%",
"render": function (data, type, full, meta) {
return "<button type='button' class='btn btn-xs' data-toggle='modal' data-target='#editPersonModal'>Edit </button>";
},
},
{
"data": "PID",
render: getImg
},
{
"data": "PID"
},
{
"data": "personName"
},
{
"data": "PeopleRemarks"
}
],
"order": [
[2, 'asc']
]
});
$('#editPersonModal').on('show.bs.modal', function (data, type, full, meta) {
console.log("Data ID---"+data['PID']);
});
i have a button in my grid , you open your modal with this, using data atributes
render: function (data, type, row) {<a data-info="' + row.IdUser + '" data-toggle="modal" data-target="#modalGridTable" ...
in row.IdUser i have my id. now when i click in $('#modalGridTable').on('show.bs.modal', function (event)...
var button = $(event.relatedTarget);
var id = button.data('info');
var data = Grid.ajax.json().data;
function getDataJson(IdUsuario) {
return data.filter(
function (data) {
return data.IdUser === IdUser;
}
);
}
var result = getDataJson(id);
so you can read this example:
result[0].Phone
For my question I have prepared a simple test case at JS Bin.
In a word game I am trying to display the 20 longest words played by a player.
I deliver the data from PostgreSQL to DataTables jQuery plugin in JSON format. It is already sorted by word length and by the date when words were played.
This order is stored as numeric value (1, 2, 3, ...) in the row property of each JSON object:
var dataSet = [
{"row":4,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"ZZ","score":11},
{"row":2,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"BBBBB","score":6},
{"row":3,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"ABC","score":7},
{"row":1,"gid":1,"created":"25.02.2017 14:07","finished":null,"player1":2,"player2":1,"score1":30,"score2":52,"female1":0,"female2":0,"given1":"Abcde3","given2":"Ghijk4","photo1":null,"photo2":null,"place1":null,"place2":null,"word":"XYZXYZXYZ","score":6}
];
Here is my JavaScript code, where I try to sort the column word (column 2) by the invisible column row (column 0):
function renderGid(data, type, row, meta) {
return (type === 'display' ? '<IMG SRC="https://datatables.net/examples/resources/details_open.png"> #' + data : data);
}
function renderGame(data) {
return 'Details for game #' + data.gid;
}
jQuery(document).ready(function($) {
var longestTable = $('#longest').DataTable({
data: dataSet,
order: [[2, 'desc']],
columns: [
{ data: 'row', orderable: false, visible: false },
{ data: 'gid', orderable: false, visible: true, className: 'details-control', render: renderGid },
{ data: 'word', orderable: true, visible: true, orderData: 0 /* order by invisible column 0 */ },
{ data: 'score', orderable: false, visible: true }
]
});
$('#longest tbody').on('click', 'td.details-control', function () {
var img = $(this).find('img');
var tr = $(this).closest('tr');
var row = longestTable.row(tr);
if (row.child.isShown()) {
row.child.hide();
img.attr('src', 'https://datatables.net/examples/resources/details_open.png');
} else {
row.child( renderGame(row.data()) ).show();
img.attr('src', 'https://datatables.net/examples/resources/details_close.png');
}
});
});
However this does not work - the displayed words order is ZZ, BBBB, ABC, XYZXYZXYZ (seemingly unsorted) - while it should be XYZXYZXYZ, BBBB, ABC, ZZ (sorted by row descending):
Why does not sorting work even though I have specified columns.orderData: 0?
And why can't I change ordering by clicking the greyed out arrows (shown by the red arrow in the above screenshot)?
Ok, this seems to be an old bug in dataTables jQuery plugin: the integer argument is not accepted.
I have to change it to an array with the single value:
{ data: 'word', orderable: true, visible: true, orderData: [0] },
and then it works:
am using yadcf with Datatable
javaScript:code
$(document).ready(function () {
$.ajax({
url: 'data.asmx/getData',
method: 'post',
dataType: 'json',
success: function (data) {
$("#tableDiv").show();
var t = $('#studentDataTable').DataTable({
data: data,
'columns': [
{
data: null
render: function (data, type, row)
{
return data['fname']+' '+data['mname']+' '+ data['lname'];
}
},
],
});
yadcf.init(t,
[
{
column_number: 0,
filter_type: "auto_complete",
}
'footer',
{
cumulative_filtering: true,
}
);
t.draw();
}
});
});
but When i type any data in the text box its not searching it.
I also tried Select filtering type that also not working,select box stays empty apart from default label.
anyone knows whats the Problem ?
Grab the 0.9.0.beta.12 and use column_data_type: rendered_html for the filter, see docs
{
column_number: 0,
column_data_type: rendered_html,
filter_type: "auto_complete",
}
As to your range slider - the following setup should be used (notice the ignore_char / filter_plugin_options
{
column_number: 2,
filter_type: "range_number_slider",
ignore_char: "%",
filter_plugin_options: {step:0.01}
}
see working jsfiddle
If that won't help, provide a jsbin sample with your issue