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.
Related
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' );
}
}
});
Hello guys I am stuck on something I have to get the values of the whole row of data table, as far I am getting id but not getting whole row object
this is where I am
var table = $('.dtPrimaryBottom').DataTable({
// dom: "Bfrtip",
"lengthMenu": [[6], [7]],
paging: true,
columns:[
{ title: 'Student ID', data: 'stu_ID', visible:false},
{ title: 'Registration No', data: 'Registration No' , 'searchable':true},
{ title: 'Name', data: 'Name' },
{ title: 'FathersName', data: 'FathersName' },
{ title: 'Class', data: 'Class' },
{ title: 'Section', data: 'Section' },
{
//"title": "Actions",
//"mdata": null,
//"render": function (data, type, row) {
// return '<button class="btnID">Edit</button>';
//"mData": null,
//"bSortable": false,
//"mRender": function (stu_ID) { return '<input id="btnDispose" type="button" onclick="myfunction(' + stu_ID +')" value="Edit" />'; }
title:'Actions',
'data': 'stu_ID',
'render': function (data, type, row) {
debugger;
var id = $(this).data('stu_ID');
// console.log(data);
return '<input id="btnEdit" type="button" class="btn btn-warning" onclick="myfunction(' + data + ')" value="Edit" /> <input id="btnDelete" type="button" class="btn btn-danger" onclick="myfunction(' + data + ')" value="Delete" />';
}
}
],
data: JsonData
});
on my onclick function when I write data I get the id but when I try to pass the whole row to my function it does not get hit
function myfunction(data) {
debugger;
var stid = row.stu_ID;
var regNo = row
alert(stu_ID);
}
how to pass whole row values when clicking on edit button?
You are specifying explicitly to pass only one value in data object :
'data': 'stu_ID'
So, you need to remove this property if you want to pass complete object to render function.
Change your code to :
'data' : null
or just simply remove this property, as default it would pass complete object then.
title:'Actions',
'render': function (data, type, row) {
debugger;
console.log(data); // you should in console object now
return '<input id="btnEdit" type="button" class="btn btn-warning" onclick="myfunction(' + data + ')" value="Edit" /> <input id="btnDelete" type="button" class="btn btn-danger" onclick="myfunction(' + data + ')" value="Delete" />';
}
Now you can access it in function down:
function myfunction(data) {
debugger;
var stid = data.stu_ID;
}
You can read more in detail about how to use render function here:
https://datatables.net/reference/option/columns.render
You can use the following way to render data. I have always rendered data in serverside processing the following way :
var table= $('.dtPrimaryBottom').DataTable( {
"serverSide": true,
"destroy" :true,
"lengthMenu": [[6], [7]],
"ajax": {
"url": '/reports/getTopPerformerReport',
},
"columns": [
{ "data": "stu_ID" },
{ "data": "Registration No", },
{ "data": "Name" },
{ "data": "FathersName" },
{ "data": "Class" },
{ "data": "Section" },
{ "data": "stu_ID",
"render": function ( data, type, full, meta ) {
return "<img src=\"http://test.com/"+data+"\" style=\"max-width:150px;\">";
}
},
]
});
Hope it helps.
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).
I use DataTable for create a list. and I unable selected multirow in it.
when click on some first rows (page1 of table), rows was selected. but when click on other pages, rows was not selected and was not go to this script and dont show anything:
$("#example tbody tr").click( function( e ) {
console.log(e);
console.log( $(this).hasClass('selected'));
if ( $(this).hasClass('selected') ) {
console.log(1111111111);
$(this).removeClass('selected');
}
else {
console.log(222222222);
table.$('tr.selected')//.removeClass('selected');
$(this).addClass('selected');
}
});
my table:
Studentjson = {BrowserStats};
var data = jQuery.map(Studentjson.BrowserStats, function (el, i) {
return [[el.imagePath, el.firstName, el.lastName, el.homeLocationText, el.homePhoneNumber,
el.role, el.edit, el.delete]];
});
table = $('#example').DataTable({
"aaData": data,
columns: [
{
"width": "3%",
data: null,
className: "center",
"orderable": false,
defaultContent: '<img class="img-responsive" src="" />'
},
{"width": "27%"},
{"width": "27%"},
{"width": "37%"},
{
data: null,
"width": "3%",
className: "center",
"orderable": false,
defaultContent: '<p data-placement="top" data-toggle="tooltip" title="Edit"><button id="EditStudent" class="btn btn-primary btn-xs" data-title="ویرایش" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>'
},
{
data: null,
"width": "3%",
"orderable": false,
defaultContent: '<p data-placement="top" data-toggle="tooltip" title="Delete"><button id="DeleteStudent" class="btn btn-danger btn-xs" data-title="Delete" ><span class="glyphicon glyphicon-trash"></span></button></p>'
},
{
"visible": false,
"searchable": false
},
{
"visible": false,
"searchable": false
}
]
});
Why this is? What i must do?
I am trying to use DataTables twice on two different modals, the problem I'm having is the second modal that opens the DataTable isn't being initialised?
CodePen of the process -
http://codepen.io/kieronapple/pen/WwzrgP
How it should work -
First modal opens first DataTables initialises
Press manage on the first modal, second modal opens. But DataTables doesn't initialise?
Function to initialise both tables
function getValidTags(type){
var ruleID = $('.ruleID').val();
switch(type){
case "validTags":
var table = $('.valid-tags').DataTable({
"ajax": {
"url": "/ajax/getValidTags.php",
"type": "POST",
"data": {
ruleID: ruleID,
type: type
},
},
"columnDefs": [{
"targets": 2,
"render": function(data, type, full, meta){
return '<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button> <button class="btn btn-danger btn-sm deleteValid">Delete</button>';
}
}],
destroy: true
});
break;
case "autofixes":
alert('hi');
var table2 = $('.autofixes-table').DataTable({
"ajax": {
"url": "/ajax/getValidTags.php",
"type": "POST",
"data": {
ruleID: ruleID,
type: type
},
},
"columnDefs": [{
"targets": 2,
"render": function(data, type, full, meta){
return '<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button>';
}
}],
destroy: true
});
break;
}
}
Function to action first DataTable
$('input[class="val_list"]').click(function() {
$('.ruleID').val($('#mongoid').val());
$('.validation-list-modal').modal('show');
$('.validTagsTable').empty();
if ($('.val_list').is(':checked')) {
$(".tags, .tm-input, .new-tag, .allow_null_div, #null-label, .auto-fix").show();
}
getValidTags('validTags');
});
Function to action second DataTable
$('.valid-tags').on('click', '.manageAutofixes', function(){
$('.autofixes-modal').modal('show');
getValidTags('autofixes');
})