Develop Reference

Datatables vertically scroll to particular row id

I am using datatables to show data. In my datatables there are some rows which are doubleclick to edit and reload the datatables after success. The problem is when the datatable reloads it goes back to the top of the table but i need to stay at the same row which i was added.
my datatable structure is like this
<table class='table-product' >
<tr id='101'>
<td></td>
</tr>
<tr id='102'>
<td></td>
</tr>
<tr id='103'>
<td></td>
</tr>
<tr id='104'>
<td></td>
</tr>
<tr id='105'>
<td></td>
</tr>
</table>
This is JS function i am using
var table2 = $('.table-product').DataTable({
searching:true,
processing: true,
"language": {
processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="color:#13436c;"></i><span class="sr-only">Loading...</span> '},
colReorder: {
realtime: false
},
ordering: false,
// "aaSorting": [[2,5,14,24]],
retrieve: true,
scrollX: true,
scrollY : '90vh',
scrollCollapse: true,
serverSide: true,
fixedHeader: false,
dom: 'Blfrtip',
"columnDefs": [],
pageLength: {{50}},
lengthMenu: [ 50, 100, 150, 200],
buttons: [
{
extend: 'colvis',
columns: ':not(.noVis)',
}
// {
// extend: 'excelHtml5',
// text: '<i class="fa fa-file-excel-o" style="font-size:22px;" title="Export Excel"></i>',
// exportOptions: { orthogonal: 'export',columns: ':visible' },
// title: null,
// }
],
ajax: {
beforeSend: function(){
$('#loader_modal').modal({
backdrop: 'static',
keyboard: false
});
$("#loader_modal").data('bs.modal')._config.backdrop = 'static';
$("#loader_modal").modal('show');
},
url:"{!! route('some-url') !!}",
data: function(data) { data.default_supplier = $('.default_supplier option:selected').val(), data.prod_type = $('.prod_type option:selected').val(),
data.prod_category = $('.prod_category option:selected').val(),
data.prod_category_primary = $('.prod_category_primary option:selected').val(),
data.filter = $('.filter-dropdown option:selected').val(),
data.sortbyparam = column_name,
data.sortbyvalue = order },
method: "post",
},
columns: [
{ data: 'checkbox', name: 'checkbox'{{#$hide_pricing_columns}} },
......
{ data: 'last_price_history', name: 'last_price_history' },
// Dynamic columns start
],
initComplete: function () {
// Enable THEAD scroll bars
$('.dataTables_scrollHead').css('overflow', 'auto');
$('.dataTables_scrollHead').on('scroll', function () {
$('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
});
},
drawCallback: function(){
$('#loader_modal').modal('hide');
},
});
I have a ID on each row and i want to stay at the same row where I was working. Either i can lock the scroll here or go back to the same row after reloading of datatable.

How do i resize the buttons in Jquery DataTable

This is my datatable I used in my project. I want to resize that edit and delete buttons. I don't know how I do that. the problem is when there re more than 10 buildings the buttons disappers. This is what it looks like when there are more than 10 buildings. I believe its the issue with the buttons.
The code I had used is:
$("#building-dt").DataTable({
"aProcessing": true,
"aServerSide": true,
"deferRender": true,
'statesave': true,
"bDestroy": true,
responsive: true,
"ajax": {
"url": baseUrl + "getBuilding/",
"dataSrc": ""
},
'fnCreatedRow': function(nRow, aData, iDataIndex) {
$(nRow).attr('id', 'building-dt-' + aData.id);
},
"columns": [{
"render": function(data, type, row, meta) {
return meta.row + 1;
}
},
{
"data": "name"
},
{
"data": "description"
},
{
sortable: false,
"width": "15%",
"render": function(data, type, content, meta) {
return '\n\
<a class="btn btn-xs btn-warning btn-edit" onclick="ediBuildings(' + content.id + ')">\n\
<i class="fa fa-pencil" title="Edit"></i></a>\n\
<button onclick="deleteBuilding(' + content.id + ')" id="image-delete" class="btn btn-xs btn-danger btn-delete" data-id="' + content.id + '">\n\
<i class="fa fa-trash" title="Delete"></i>\n\
</button>';
}
}
]
});
I want to know whether the problem is with the buttons or code. if it is with the buttons how do i resolve that?
thanks in advance.

datatable add class a td render

How Can I add a class in this render where I ask if the office is enable or disable, if this disable should add this class table-active. I was searching for some similar question but none worked.
var table = $('#tbl_1').DataTable({
"order": [
[1, "asc"]
],
"destroy": true,
"ajax": {
"method": "POST",
"url": "JSON/Office.php"
},
"iDisplayLength": 15,
"columns": [ {
"data": "Office",
"width": "20%"
}, {
"data": "Status",
"searchable": false,
"sortable": false,
"aling": "center",
"render": function(data, type, row) {
var Status = row["Status"];
if (Status == 'FALSE') {
return '<button class="btn btn-sm btn-success active" onclick="enable_item(this)"title="Active">Active</button>';
} else {
return '<button class="btn btn-sm btn-danger disable" onclick="disable_item(this)" title="Disable"> Disable</button>';
}
}
}],
"dom": '<"dt-buttons"Bf><"clear">lirtp',
"paging": true,
"autoWidth": true,
buttons: [{
extend: 'excel',
text: 'Excel'
}]
});
One of the answer I found was this $(row).addClass("table-active"); but still not working :(. I hope I explain well greetings

If I understood you correct and you want to add a class to the <tr> element you can use the createdRow hook - https://datatables.net/reference/option/createdRow.
$('#tbl_1').dataTable({
"createdRow": function( row, data, dataIndex ) {
if ( data["Status"] == false ) {
$(row).addClass( 'table-active' );
}
}
});

On row click , prevent to redirect when clicking on the button

Here I am using data table
Row click I want to do something [redirection],
in a row, one of the columns has a button & it has some action.
Problem: when I click button to do action getting row click, want to prevent row click while clicking on button
CODE
$('#example').click(function () {
var dataArr;
var rows = $('tr.selected');
var rowData = table.rows(rows).data();
$.each($(rowData), function (key, value) {
dataArr = value["id"];
window.location = 'clients?id=' + dataArr;
});
}
What should I change? Thank you
Edit:
The buttons :
$(document)
.ready(
function() {
var table = $('#example')
.DataTable({
"sAjaxSource": "/clients",
"sAjaxDataProp": "",
"order": [
[0, "asc"]
],
"aoColumns": [{
"mData": "id"
},
{
"mData": "name"
},
{
"mData": "lastName"
},
{
"mData": null,
defaultContent:'<p>1</p>'
},
{
"mData": null,
className: "center",
defaultContent: ' <p title="New"><button class="btn btn-primary btn-xs newButton" data-title="Add" id="btn"><span class="glyphicon glyphicon-plus"></span></button></p>'
},
{
"mData": null,
className: "center",
defaultContent: '<p data-placement="top" data-toggle="tooltip" title="Edit "><button class="btn btn-default btn-xs data-title="edit" data-toggle="modal" data-target="#edit""><span class="glyphicon glyphicon-pencil"></span></button></p>'
},
{
"mData": null,
className: "center",
defaultContent: ' <p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete"><span class="glyphicon glyphicon-trash"></span></button></p>'
}
]
});
I am using DataTables. ANd only need this for the last two columns where edit and delete are

Whenever child event call parent event, here you can prevent using the following method.
event.stopPropagation();

Try using event.stopPropagation();
The code will be similar with :
$(".table_row"/*the table row class*/).on('click', 'button', function () {
//button action
}).on('click', $(this).parent().parent().parent() , function (e) {
e.stopPropagation();
});/* if $(this).parent().parent().parent() doesn't work ,search in developer tools to see where click action is triggered ,on the */
Something like
I tried to make something I don't know if you like it but it works the way you want this(updated).

JQuery DataTable add attribute to customize button

I'm trying to build JQuery DataTable with customize buttons. This is my code:
<table id="myDataTable" class="display" width="100%">
<thead>
<tr>
<th> </th>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function () {
$('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "Home/GetDataTable",
"bProcessing": true,
"aoColumns": [
{"data": "ID"},
{ "data": "Name" },
{ "data": "Address" },
{ "mData": "Town" },
{
bSortable: false,
data: null,
className: "center",
defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>'
}
],
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
},
]
});
});
</script>
And this is my Action in the Controller:
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = result.Count(),
iTotalDisplayRecords = result.Count(),
aaData = result
},
JsonRequestBehavior.AllowGet);
}
This code works fine but now I want to add data-id attributes to my buttons. I wanna to set value of ID field (which I hided) to data-id attribute for each row. How I can implement it?

<script>
$(document).ready(function () {
$('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "Home/GetDataTable",
"bProcessing": true,
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// if your button is in 5th column then index will be 4 because it starts from 1
$('td:eq(4)', nRow).find( 'button' ).attr('id',aData[0]);
//assuming your id is in the 1st element of data
},
"aoColumns": [
{"data": "ID"},
{ "data": "Name" },
{ "data": "Address" },
{ "mData": "Town" },
{
bSortable: false,
data: null,
className: "center",
defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>'
}
],
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
},
]
});
});
</script>

hi could u please test this code :
{
bSortable: false,
data: null,
render: function(d) {
return "<button class="btn btn-danger data-id="'+ d.YourModelID +'" ">edit</button> <button class="btn btn-primary">delete</button>";
},
className: "center",
}
instead of this :
{
bSortable: false,
data: null,
className: "center",
defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>'
}