I've initiated a datatable plugin as following:
var table= $("#mytable").DataTable({
ajax: "list.json",
columns: [
{"data": "name"},
{"data": "location"},
{"data": "date"}
],
searchCols: [
{"search": "John"},
null,
null
]
});
The example above also does a pre search on the first column. Now, when the plugin is initiated I want to interact with some of its rows:
fnInitComplete: function() {
$(this).find("tr").click( ... );
}
Everything works good, UNTIL I try to interact with a row that's been searched on the table render {"search": "John"} and that was searched again after (e.g. I changed the search query to "Richard" and tried to click on one of that rows). Any ideas?
You need to use delegated event handlers because jQuery DataTables manipulates DOM on each table draw.
For example:
var table= $("#mytable").DataTable({
ajax: "list.json",
columns: [
{"data": "name"},
{"data": "location"},
{"data": "date"}
],
searchCols: [
{"search": "John"},
null,
null
]
});
$("#mytable").on("click", "tr", function(){
// Handle click event
});
Related
I have a datatable that retrieves json data from an api. The first column of the table should only contain a checkbox. However, when retrieving the data it populates the first column as well.
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
$('#parametrictable').DataTable({
data : json.data,
columns : json.columns,
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
})
});
Is there any way that I can set that the data should only populate starting from the second column, leaving the first column to only contain the checkbox?
You can fix this issue by updating the api or in your js code just updating the data key value to null for first object in the json.columns array like:
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
json.columns[0].data = null;
json.columns[0].defaultContent = '';
$('#parametrictable').DataTable({
data: json.data,
columns: json.columns,
.... your rest of code
})
});
EDIT:
I meant what your suggestion only did was hide the data that was overlapping with the checkbox. I don't want it hidden. I want the first column to be, by default, only checkboxes. and the overlapping data should be on the 2nd column.
You can update your API like this to achieve that:
"columns": [
{
"data": null,
"defaultContent": ""
},
{
"data": "DT_RowId",
"title": "Id"
},
{
"data": "supplier",
"title": "supplier"
},
{
"data": "color",
"title": "color"
}
],
Or, you can update your code without modifying your API like:
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
// Add object for checkbox at first position
json.columns.unshift({"data": null, "defaultContent": ""});
$('#parametrictable').DataTable({
data: json.data,
columns: json.columns,
....your rest of code
})
});
hey guys i have a problem with Datatable plugin
the problem is that i can't select the checkbox in the action column to convert it into bootstrap-toggle
it was working before but when i use the serverside of datatable and declare the checkbox in the controller nothing works (Sorry for my english )
please help!!
this is the controller code
return DataTables::of($participant)
->addColumn('action',function($participant){
$route = route('admin.participant.presence',$participant);
return '<form action="'.$route.'" method="PATCH">
<input type="hidden" name="presence" value="0">
<input type="checkbox" class="participation" onchange="this.form.submit()" '.isChecked($participant).' name="presence" value="1">
</form>';
})->make(true);
and here's the js code in the view and I think the problem comes from here
<script>
$(document).ready( function(){
var id = {{request()->route('id')}};
$('#table').DataTable({
"processing": true,
"serverSide": true,
"ajax": "/admin/evenment/event/participant/ajaxdatatable/"+id,
"columns":[
{"data": "adherent_id"},
{"data": "nom_participant"},
{"data": "prenom_participant"},
{"data": "fonction"},
{"data": "action"},
]
});
$('.participation').bootstrapToggle({
on: 'Oui',
off: 'Non',
onstyle: 'success',
offstyle: 'danger',
width: '70'
});
});
</script>
When using serverSide, the resulting table is displayed after the full page load. Therefore the bootstrap elements have already been generated when datatable displays the results.
You can solve this by calling a function which takes care of displaying bootstrap elements in the "complete" ajax handler. (here the $.extend applies to a datatable options object)
$.extend(true, options, {
"ajax": {
"url": self.data('url'),
"data": function ( d ) {
d.action = "drawDatatable"
},
"type": "POST",
"complete": function() {
prepareDisplayElements("#"+self.attr("id"));
}
}
});
So in your case this could be something simple like this:
$(document).ready( function(){
var id = {{request()->route('id')}};
$('#table').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/admin/evenment/event/participant/ajaxdatatable/"+id,
"complete": function() {
$('.participation').bootstrapToggle({
on: 'Oui',
off: 'Non',
onstyle: 'success',
offstyle: 'danger',
width: '70'
});
}
},
"columns":[
{"data": "adherent_id"},
{"data": "nom_participant"},
{"data": "prenom_participant"},
{"data": "fonction"},
{"data": "action"},
]
});
});
I need to edit the columns section of this code for change the content of tr and td for table generated by json response. For example, I need to insert a hyperlink on EFICAZ_TAB_RESULTADO column for use click event.
I don't know how to do this task and I need help!
$(document).ready(function(){
// Setup datatables
$.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings){
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
"iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
};
};
var table = $("#mytable").dataTable({
initComplete: function() {
var api = this.api();
$('#mytable_filter input').off('.DT').on('input.DT', function(){
api.search(this.value).draw();
});
},
oLanguage: {
sProcessing: "carregando ..."
},
processing: true,
serverSide: true,
searching: false,
ajax: {
"type": "POST",
"url": "/tab/getJsonAllOcorrenciasTabForMonth"
},
pageLength: 100,
columns: [
{"data": "EFICAZ_TAB_ID"},
{"data": "ID"},
{"data": "PERIODICIDADE"},
{"data": "EFICAZ_TAB_MES_ANO"},
{"data": "EFICAZ_TAB_ITEM_ID"},
{"data": "EFICAZ_TAB_META"}, // if EFICAZ_TAB_META é diferente de EFICAZ_TAB_RESULTADO
{"data": "EFICAZ_TAB_RESULTADO"}
],
order: [
[1, 'asc']
],
rowCallback: function(row, data, iDisplayIndex) {
var info = this.fnPagingInfo();
var page = info.iPage;
var length = info.iLength;
$('td:eq(0)', row).html();
}
}); // end setup datatables
// addClass para formatar estilo bootstrap ...
$("#mytable_length select").addClass("form-control")
});
I suggest utilizing the rowCallback. This allows you to modify the rows as they are being drawn to the table. You just have to select the cell within the respective row to modify it. I suggest adding a class to the column:
Add a Column Class
columns: [
...
{
"data": "EFICAZ_TAB_RESULTADO",
"className": "hyperlinkClass"
}
...
]
Modify that cell each time a new row is drawn
rowCallback: function(row, data, iDisplayIndex) {
$(row).find(".hyperlinkClass").html('HYPERLINK TEXT');
}
You can achieve that by using columnDefs property, e.g. add a click event on EFICAZ_TAB_RESULTADO column:
columnDefs: [{
"targets": [6],//index of EFICAZ_TAB_RESULTADO
"createdCell": (td, cellData, rowData, row, col) => {
$(td).css({
'color': '#007bff',
'cursor': 'pointer'
});
$(td).attr('title', 'Click Me');
$(td).click(e => {
alert(cellData) //call the function here
})
}
}
]
Fiddle for your reference.
I'm using Datatables plugin in one school project. But I can not make it work server side version. In the client side version I have some crud botons to manage the data. But I can not achieve to put that buttons in the sever side version. I try to use it with mRender wich aloud me create HTML objects. But I want to put some data array value inside this string. But I can't make it. Can someone help me with this one please.
This es what I try.
<script type="text/javascript">
$(document).ready(function () {
$('#mita').DataTable({
"columns": [
{"data": "llave"},
{"mRender": function ( data, type, full ) {
return 'Download';}},// Problem Here !!!
{"data": "llave"},
{"data": "titulo"},
{"data": "titulo"},
{"data": "fecha_inicio"},
{"data": "fecha_fin"},
{"data": "fecha_fin"},
{"data": "fecha_fin"},
{"data": "fecha_fin"}
],
"processing": true,
"serverSide": true,
"order": [[ 0, "desc" ]],
"ajax": {
url: 'demo2.php',
type: 'POST'
}
});
});
</script>
This fix maybe help you , try this :
<script type="text/javascript">
$(document).ready(function () {
$('#mita').DataTable({
"columns": [
{"data": "llave",
"render": function ( data, type, full, meta ) {
return 'Download';
}
},
{"data": "llave"},
{"data": "titulo"},
{"data": "titulo"},
{"data": "fecha_inicio"},
{"data": "fecha_fin"},
{"data": "fecha_fin"},
{"data": "fecha_fin"},
{"data": "fecha_fin"}
],
"processing": true,
"serverSide": true,
"order": [[ 0, "desc" ]],
"ajax": {
url: 'demo2.php',
type: 'POST'
}
});
});
I'm trying load json data on table using datatables
The return of json from php is like this:
data = {
"CLIENTES": {
"0": {
"ID": "1",
"NOME": 'GABRIEL'
},
"1": {
"ID": "2",
"NOME": 'RODRIGUES'
}
}
}
In the documentation columns data they say that I need to follow this structure:
table.DataTable({
"ajax": url,
columns: [
{"data": "CLIENTES.ID"},
{"data": "CLIENTES.NOME"}
]
});
But dont work, and we know that the right acess to de data index is this way:
{"data": "CLIENTES['0'].ID"},
{"data": "CLIENTES['1'].ID"},
But need's to be dynamically, how can I do this?
You should create new data for datatable without CLIENTES .... map is an option.
$(document).ready(function() {
data = {
"CLIENTES": {
"0": {
"ID": "1",
"NOME": 'GABRIEL'
},
"1": {
"ID": "2",
"NOME": 'RODRIGUES'
}
}
};
var newData = $.map(data.CLIENTES, function(el) { return el });
$('#example').DataTable({
data: newData,
columns: [
{"data": "ID"},
{"data": "NOME"}
]
});
});
example: https://jsfiddle.net/cmedina/7kfmyw6x/5/
If you remove the 'CLIENTES' outer array and only return an array of the results in your PHP, you will be able to refer to the values like this:
table.DataTable({
"ajax": url,
columns: [
{"data": "ID"},
{"data": "NOME"}
]
});
you can do things to an object dynamically by using for var in
var myArray = [] //an empty array
for(var i in data){
myData.push({"data": "CLIENTES[i].ID"})
myData.push({"data": "CLIENTES[i].NOME"})
}
then later you can do this
table.DataTable({
"ajax": url,
columns: myArray
});
but I suspect the way you write {"data": "CLIENTES[i].ID"} is wrong, though i havent used datatables before.
maybe something like this is more correct? it's how you usually get to object properties
for(var i in data){
myData.push({"data": data.CLIENTES[i].ID})
myData.push({"data": data.CLIENTES[i].NOME})
}