How do I keep the lookup working on the DataTables.js modified render column?
In the snippet below, I tried to search the data that is in the render columns does not show anything.
$('#release-table').DataTable({
processing: true,
serverSide: true,
autoWidth: true,
ajax: "http://localhost/project/ajax/index_data.php?page=release",
order: [[ 0, 'desc' ]],
columns: [
{ data: 'no', name:'id', render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}},
{ "data": 0 },
{ "data": 1 },
{
"data": null,
"render": function(data, type, row, meta){
return '<img src="http://localhost/project/assets/dashboard/files/'+row["2"]+'" width="40" height="40">';
}, searchable: true, orderable: true
},
{
"data": null,
"render": function(data, type, row, meta){
return '<span><strong>'+row["4"]+'</strong></span> <br><strong class="text-muted">'+row["5"]+'</strong>';
}, searchable: true, orderable: true
},
{ "data": 6 },
{
"data": null,
"render": function(data, type, row, meta){
return '<i>UPC: '+row['7']+'</i> <br>ISRC: <i>'+row['8']+'</i>';
}, searchable: true, orderable: true
}
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I remember having a similar issue and could not find a better solution than to add the search data in the column render inside an html element with display:none; in addition to what you are already rendering.
For example :
<span style="display:none;">${data.property_1} ${data.property_2}</span>
There might be a better solution to this, consider it more like a workaround, but it works.
Related
I have been trying to render my json in datatable. The json format i have been working with is as follows:
{
message: "",
data: {
count: "",
result: [
{
parameter1: "",
parameter2: "",
parameter3: "",
},
{
parameter1: "",
parameter2: "",
parameter3: "",
},
]
}
}
Datatable Code is as follow
$('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
url: "https://c22c6e75-a9b9-4762-8f5d-b25137536fa6.mock.pstmn.io/iprSearchData",
},
"columnDefs": [
{
"targets": [0],
"data": function (row, type, val, meta) {
// not hitting
console.log(row);
console.log(type);
console.log(val);
console.log(meta);
},
"render": function (data, type, row) {
console.log(data);
console.log(row);
return data;
},
},
// {targets: [0], visible: true},
// {targets: '_all', visible: false}
]
});
I read the documentation and I assume the data(JSON) format is creating problems for me in rendering or is it some other issue?
I want to render my parameters in reult array of the JSON to be displayed in a single column.
Thanks in advance.
The JSON format was the issue. Use datasrc in ajax for appropriate data from the returned ajax.
I know it has been addressed already, but I'm just not getting it to work. I'm using DataTable Editor with resposnive and serverside. I'm getting an error when I put the checkbox in the first column like:
js:
var table = $('#mytable').DataTable( {
dom: "rt",
ajax: {
url: "/source.php",
type: "POST",
data: function (d) {
}
},
serverSide: true,
processing: true,
select: {
style: 'os',
selector: 'td:first-child'
},
columns: [
{
data: null,
defaultContent: "",
className: "select-checkbox",
orderable: false,
targets: 0
},
{ data: "logo" },
{ data: "name" },
{ data: "product" }
]
} );
That's the Error message:
DataTables warning: table id=mytable - Unknown field: (index 0)
php:
Editor::inst( $db, 'table' )
->fields(
Field::inst( 'logo' ),
Field::inst( 'url' ),
Field::inst( 'name' ),
Field::inst( 'product' )
)
... wenn putting in the last column it works:
...
columns: [
{ data: "logo" },
{ data: "name" },
{ data: "product" },
{
data: null,
defaultContent: "",
className: "select-checkbox",
orderable: false,
targets: 0
}
]
...
How can I get the checkbox in the first column? (So column 0)
add this in code
$("#table").DataTable({
'columnDefs': [{
'targets': 0,
'bSortable': false,
'render': function (data, type, full, meta){
return '<input type="checkbox"> <label>Checkbox</label>';
}
}]
})
Here the answer from the author:
You have server-side processing enabled, and the default ordering is to order on the first column. When that happens, DataTables is telling the server to order on the client-side generated column and throws an error.
Use ``order: [[1, 'desc']]` to resolve that.
i created a table with jquery datatables. when I want to filter my table with search bar, the browser gives me an alert DataTables warning: table id=grid - Ajax error. For more information about this error, please see http://datatables.net/tn/7.
this is my code :
$("#grid").dataTable({
"processing": true, // control the processing indicator.
"serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
"info": true, // control table information display field
"stateSave": true, //restore table state on page reload,
"searching": true,
"language": {
"url": "/translate/datatables.fa-IR.json"
},
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], // use the first inner array as the page length values and the second inner array as the displayed options
"ajax": {
"url": serviceBase + "/Auth/Admin/SearchOrders2/",
"type": "GET",
'beforeSend': function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + localStorageService.get("authorizationData").token);
}
},
"columns": [
{ "data": "customerContact", "orderable": true },
{ "data": "isDone", "orderable": true },
{
"mRender":
function (data, type, row) {
var xxx = $scope.name1 = $filter("jalaliDateFromNow")(row["createdDate"]);
return "<span>" + $filter("jalaliDateFromNow")(row["orderCreationTime"]); +'</span>';
}, "orderable": true
},
{ "data": "totalPrice", "orderable": true },
{ "data": "count", "orderable": true },
{ "data": "description", "orderable": true },
{
"mRender": function (data, type, row) {
return '<button class="btn btn-sm btn-circle green tooltips" disabled="disabled"><i class="fa fa-check"></i><span>جزئیات</span></button>'
},
"orderable": false
}
],
"order": [[0, "desc"]]
});
which part of my code is wrong?
In the Table I got 2 columns that I want the same link with attached ID from the item. The frist one from the ID it selft works, But I what to attach the ID to the link of the name it self.
Below is my code to initialize the datatable.
<script>
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data.txt",
"processing": true,
"columns": [
{ "data": "id", "name": "id",
"render": function (data, type, JsonResultRow, meta) {
return ' '+data+' ';
}
},
{ "data": "dob", "name": "dob",
"render": function (data, type, JsonResultRow, meta) {
return '<img src="/img/userpics/'+data+'">';
}
},
{ "data": "name", "name": "name",
"render": function (data, type, JsonResultRow, meta) {
var varempid = THIS_IS_WHAT_I_CANT_DO ;
return ' '+data+' ';
}
},
{ "data": "position", "name": "position" },
{ "data": "status", "name": "status" }
],
responsive: true,
'iDisplayLength': 6,
"order": [[ 0, "asc" ]],
"lengthMenu": [[50, 100, 500, 1000, -1], [50, 100, 500, 1000, "All"]],
"pageLength": 50
} );
} );
</script>
I think you can get all the data from the row inside the JsonResultRow. You can try console.log(JsonResultRow) to view all the data for the row.
{ "data": "name",
"name": "name",
"render": function (data, type, JsonResultRow, meta) {
var varempid = JsonResultRow['id'];
return ' '+data+' ';
}
},
I need to pass the Value of the first column into the second column render function() to make a hyperlink where the value of the first column is parameter. of the hyperlink.
"Columns": [
{
"data": "Code", "autoWidth": true,
},
{ "data" : "StyleReference","autoWidth": true,
"render": function (data, oObj) {
return '' + data + '';
}
}
]
Any Help Please!!
You're nearly there. The render function can take up to 4 variables. Your row represents the whole object, this should work:
"columns": [{
"data": "Code",
"autoWidth": true
}, {
"data": "StyleReference",
"autoWidth": true,
"render": function(data, type, row, meta) {
return '' + data + '';
}
}]
Hope that helps.