Anyone can please help me why data table export option not working on the below-given link.
http://ec2-52-66-146-251.ap-south-1.compute.amazonaws.com/Purvi/index.php/Ledger/ledger_view/18
jQuery:
var table = $('#example').DataTable({
"ordering": false,
buttons: [{
extend: "print",
className: "btn dark btn-outline"
}, {
extend: "copy",
className: "btn red btn-outline"
}, {
extend: "pdf",
className: "btn green btn-outline"
}, {
extend: "excel",
className: "btn yellow btn-outline "
}, {
extend: "csv",
className: "btn purple btn-outline "
}, {
extend: "colvis",
className: "btn dark btn-outline",
text: "Columns"
}],
});
Please help me why the data table export option is not working on given link.
Replace your above code to this and try :
$('#example').DataTable({
"ordering": false,
buttons: [{
extend: "print",
className: "btn dark btn-outline"
}, {
extend: "copy",
className: "btn red btn-outline"
}, {
extend: "pdf",
className: "btn green btn-outline"
}, {
extend: "excel",
className: "btn yellow btn-outline "
}, {
extend: "csv",
className: "btn purple btn-outline "
}, {
extend: "colvis",
className: "btn dark btn-outline",
text: "Columns"
}],
});
Have you included this library files?
- https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.css"/>
You already added required files?
- https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.js
You should also check this usage to include.
"dom": 'lBfrtip',
Related
I have a datatables, which is filled with json data from the db.
As you can see in the last column, there are 2 buttons, one for updating and the other one for deleting the data.
When pressing the button, the value of NumEmpleado(hidden), Nombre, email and Password passes to a form.
It works just fine, buf if I resize my browser enough to kick in the responsiveness layout. Then when I click on the blue button(update), the console says it cannot read the property. I can imagine is because of the responsive layout, but I'm not sure how to deal with it.
This is table code:
<div class="table-responsive col-sm-12">
<table id="dt_cliente" class="table table-bordered table-hover nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>NumEmpleado</th>
<th>Nombre</th>
<th>Correo</th>
<th>TipoCuenta</th>
<th>Operaciones</th>
</tr>
</thead>
</table>
</div>
This is how the table is populated and then adds the update/delete buttons
var listar = function(){
$("#cuadro2").slideUp("slow");
$("#cuadro1").slideDown("slow");
var table = $("#dt_cliente").DataTable({
"destroy":true,
"responsive": true,
"ajax":{
"method":"POST",
"url": "listar.php"
},
"columns":[
{"data": "NumEmpleado"},
{"data": "nombre"},
{"data": "correo"},
{"data": "tipoCuenta"},
{"defaultContent": "<button type='button' class='editar btn btn-primary'><i class='fa fa-pencil-square-o'></i></button> <button type='button' class='eliminar btn btn-danger' data-toggle='modal' data-target='#modalEliminar' ><i class='fa fa-trash-o'></i></button>"}
],
"language": idioma_espanol,
"dom": "Bfrtip",
"buttons": [
{
"text": "<i class='fa fa-refresh'></i>",
"titleAttr": "Recargar Datos",
// "className": "btn btn-sucess",
"action": function(){
listar();
}
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'Excel'
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-text-o"></i>',
titleAttr: 'CSV'
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: 'PDF'
}
]
});
obtener_data_editar("#dt_cliente tbody", table);
}
and this is the function that get the values from the table to place them on a form. (blue update button)
var obtener_data_editar = function(tbody, table) {
$(tbody).on("click", "button.editar", function(){
var data = table.row($(this).parents("tr")).data();
var numEmpleado = $("#numEmpleado").val( data.NumEmpleado),
nombre = $("#nombre").val( data.nombre ),
correo = $("#correo").val(data.correo),
password = $("#password").val(data.password),
opcion = $("#opcion").val("modificar");
$("#cuadro2").slideDown("slow");
$("#cuadro1").slideUp("slow");
});
}
Thank you for your time.
I think the problem is in either of these:-
1)Listener
2)Destroy
3)It is not able find the value of that variable because of some issues.
Kindly check all these and tell me if it solves the issue
i'm working on a page having two radio buttons and a table filled with data from the controller. the data shown in the table are from two different categories.
now i want to make sure that when user chooses a different radio button it displays just the category of this button not both categories
here is my try
this is the Controller method that retrieves the data
public function Data(){
$data = App\Equations::get();
return array('aaData'=>$data);
}
and here how i receive it in the view using Ajax
var table = $('#table-active').DataTable({
responsive: {
details: {
type: 'column',
target: -1
}
},
ajax:{"url" : "datatblejson",type:"get",data:{_token: $('meta[name="csrf-token"]').attr('content')}},
buttons: {
dom: {
button: {
className: 'btn btn-default'
}
},
buttons: [
{
extend: 'colvis',
text: '<i class=icon-loop3></i>',
className: 'btn btn-default',
action: function ( e, dt, node, config ) {
$.ajax({
url:'datatblejson', type: 'get', data: {_token: $('meta[name="csrf-token"]').attr('content')}
});
$('#table-active').DataTable().ajax.reload();
}
},
{extend: 'copy',text: '<i title="Copy" class="icon-copy3"></i>'},
{extend: 'csv' ,text: '<i title="Export to CSV sheet." class="icon-file-spreadsheet"></i>'},
{extend: 'excel' ,text: '<i title="Export to excel sheet." class="icon-file-excel"></i>'},
{extend: 'pdf' , text: '<i title="Export to PDF file." class="icon-file-pdf"></i>'},
{extend: 'print', text: '<i title="Print" class="icon-printer"></i>'},
{
extend: 'colvis',
text: '<i class="icon-three-bars"></i> <span class="caret"></span>',
className: 'btn bg-blue btn-icon'
}
]
},
columnDefs: [
{
className: 'control',
orderable: false,
targets: -1
}],
deferRender: true,
columns:[
{"render": function ( type, full, data, meta ) {
return '<a href="#" title="Open profile" class="profile" >'+data.name+'</a>';
}},
{"render": function ( type, full, data, meta ) {
return '<input type="text" name='+data.id+' value='+data.value+'>';
}},
{ "data": null, "defaultContent":'<center><ul class="icons-list"><li class="dropdown"><i class="icon-menu9"></i><ul class="dropdown-menu dropdown-menu-right">' +
'<li></i> Timeline</li>' +
'<li></i> Profile</li>' +
'<li><i class=" icon-file-eye"></i> Disconnect </li>' +
'<li><i class=" icon-file-eye"></i> Suspend </li>' +
'</ul> </li> </ul></center>'}
//{ "data":null,"defaultContent":"" }
]
});
and here is the form that contains the two radio buttons that i want to change table content when checked
<form action="{{url('update_price')}}" method="get" id="update">
<div class="panel-heading">
<h5 class="panel-title">Update Prices NOW!</h5>
</div>
<div class="row" style="margin-left: 5%">
<h3>Please Choose a Category</h3>
<input class="radio" id="radio-1" name="rd" type="radio" checked value="engineer">
<label tabindex="4" for="radio-1" class="radio-label">Engineer</label>
<br />
<input class="radio" id="radio-2" name="rd" type="radio" value="user">
<label tabindex="5" for="radio-2" class="radio-label">Normal User</label>
<br />
</div>
<div class="panel-body">
</div>
<table class="table" width="100%" id="table-active">
<thead>
<tr>
<th>Name</th>
<th>Cost</th>
</tr>
</thead>
</table>
<button id="button" style="margin-left: 45%;back"></button>
</form>
have you tried with some function in jquery to get again the data when the radio button clicked? and adding a category parameter to the ajax request..
Something like this:
$('.radio').on('click', function(){
var table = $('#table-active').DataTable({
responsive: {
details: {
type: 'column',
target: -1
}
},
ajax:{"url" : "datatblejson",type:"get",data:{_token: $('meta[name="csrf-token"]').attr('content')}},
buttons: {
dom: {
button: {
className: 'btn btn-default'
}
},
buttons: [
{
extend: 'colvis',
text: '<i class=icon-loop3></i>',
className: 'btn btn-default',
action: function ( e, dt, node, config ) {
$.ajax({
url:'datatblejson', type: 'get', data: {_token: $('meta[name="csrf-token"]').attr('content'), category: 'id_category'}
});
$('#table-active').DataTable().ajax.reload();
}
},
{extend: 'copy',text: '<i title="Copy" class="icon-copy3"></i>'},
{extend: 'csv' ,text: '<i title="Export to CSV sheet." class="icon-file-spreadsheet"></i>'},
{extend: 'excel' ,text: '<i title="Export to excel sheet." class="icon-file-excel"></i>'},
{extend: 'pdf' , text: '<i title="Export to PDF file." class="icon-file-pdf"></i>'},
{extend: 'print', text: '<i title="Print" class="icon-printer"></i>'},
{
extend: 'colvis',
text: '<i class="icon-three-bars"></i> <span class="caret"></span>',
className: 'btn bg-blue btn-icon'
}
]
},
columnDefs: [
{
className: 'control',
orderable: false,
targets: -1
}],
deferRender: true,
columns:[
{"render": function ( type, full, data, meta ) {
return '<a href="#" title="Open profile" class="profile" >'+data.name+'</a>';
}},
{"render": function ( type, full, data, meta ) {
return '<input type="text" name='+data.id+' value='+data.value+'>';
}},
{ "data": null, "defaultContent":'<center><ul class="icons-list"><li class="dropdown"><i class="icon-menu9"></i><ul class="dropdown-menu dropdown-menu-right">' +
'<li></i> Timeline</li>' +
'<li></i> Profile</li>' +
'<li><i class=" icon-file-eye"></i> Disconnect </li>' +
'<li><i class=" icon-file-eye"></i> Suspend </li>' +
'</ul> </li> </ul></center>'}
//{ "data":null,"defaultContent":"" }
]
});
});
I'm using Yajra datatable, I had an issue as what title said.
here's my controller so far :
public function makeActionButtonsForDatatable($model)
{
if ($model->employed_type == DriverEmployedType::PARTTIME) {
return '<a href="' . route('parttimeavailable.create', ['driver' => $model->id]) . '"
class="btn btn-default btn-xs"></span>Set Parttime
</a>
<a href="' . route('driver.edit', ['driver' => $model->id]) . '"
class="btn btn-primary btn-xs"><span class="fa fa-pencil"></span> Edit
</a>
<a id="delBtn" data-url="'.route('driver.destroy', ['driver' => $model->id]).'"
data-toggle="modal" data-target=" #modalDelete" data-title="Confirmation" data-table-name="#datatable" data-message="Do you want to delete this record?"
class="btn btn-danger btn-xs delete" >
<span class="fa fa-trash-o"></span> Delete
</a>';
}
switch ($model->status) {
default:
return'
<a href="' . route('driver.edit', ['driver' => $model->id]) . '"
class="btn btn-primary btn-xs"><span class="fa fa-pencil"></span> Edit
</a>
<a id="delBtn" data-url="'.route('driver.destroy', ['driver' => $model->id]).'"
data-toggle="modal" data-target=" #modalDelete" data-title="Confirmation" data-table-name="#datatable" data-message="Do you want to delete this record?"
class="btn btn-danger btn-xs delete" >
<span class="fa fa-trash-o"></span> Delete
</a>
';
break;
}
}
public function makeDatatable($obj) {
return Datatables::of($obj)
->addColumn('action', function ($model) {
return $this->makeActionButtonsForDatatable($model);
})
->editColumn('full_name', function($model) {
return '<a href="' . route('driver.edit', ['driver' => $model->full_name]) . '"</a>';
})
->editColumn('employed_type', function($model){
return DriverEmployedType::getString($model->employed_type);
})
->make(true);
}
and here's my datatable code so far :
$(document).ready(function(){
var datatable = $('#datatable').DataTable(
{
dom: "lrtip",
responsive: true,
processing: true,
serverSide: true,
bSortCellsTop: true,
ajax: {
url: "{{ route('driver.list') }}",
data: { '_token' : '{{csrf_token() }}'},
type: 'POST',
},
columns: [
{ data: 'full_name', name: 'full_name', className: 'text-center', },
{ data: 'mobile', name: 'mobile', className: 'text-center', },
{ data: 'nric', name: 'nric', className: 'text-center', },
{ data: 'license', name: 'license', className: 'text-center', },
{ data: 'employed_type', name: 'employed_type', className: 'text-center', },
{ data: 'action', name: 'action', className: 'text-center', orderable: false, searchable: false },
],
});
});
It didn't works, and didn't display my fullname column. I want is once I click the name it goes to edit form with that driver Id.
any idea ?
I think you missed to close <a> for fullName column, try below code:
public function makeDatatable($obj) {
return Datatables::of($obj)
->addColumn('action', function ($model) {
return $this->makeActionButtonsForDatatable($model);
})
->editColumn('full_name', function($model) {
return ''. $model->full_name .'';
})
->editColumn('employed_type', function($model){
return DriverEmployedType::getString($model->employed_type);
})
->make(true);
}
Let me know if you still facing the same!
I'm using the jQuery DataTables plugin and within the initialization I'm using the "drawCallback" to make changes to the look of the rows.
My code is as follows:
"drawCallback": function() {
table.rows().every( function() {
var d = this.data();
var option = this.find('.options');
if (d.activated) {
option.html('<button class="btn btn-mini btn-primary pull-right"> Enabled</button>');
} else {
option.html('<button class="btn btn-mini btn-danger pull-right"> Disabled</button>');
}
});
}
However the this.find('.options') part isn't doing anything.
Essentially I want to:
get the current row
select the column I've given the className of 'options'
insert a button there relevant to the row data
HTML:
<table id="example">
<thead>
<tr>
<th></th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
</table>
DataTables initialisation:
var table = $('#example').DataTable( {
columns: [
{
"className": 'center',
"data": null,
"defaultContent": ''
},
{
data: 'last_name'
},
{
data: 'first_name'
},
{
data: 'email'
},
{
"className": 'options',
"data": null,
"defaultContent": ''
}
],
// ...and so on
Originally I had the following code which worked:
$('td.options').html('<button class="btn btn-mini btn-primary pull-right"> Enabled</button>');
but this was indiscriminate of the row data and simply pasted the same button for each row.
Use columns.render option to define a function producing content for the cell.
var table = $('#example').DataTable( {
columns: [
{
"className": 'center',
"data": null,
"defaultContent": ''
},
{ "data": 'last_name' },
{ "data": 'first_name' },
{ "data": 'email' },
{
"className": 'options',
"data": null,
"render": function(data, type, full, meta){
if (full.activated) {
return '<button class="btn btn-mini btn-primary pull-right"> Enabled</button>';
} else {
return '<button class="btn btn-mini btn-danger pull-right"> Disabled</button>';
}
}
}
],
// ...and so on
});
I am building a CRUD application which runs on Data-tables server-side processing, I managed to generate the table dynamically but when I try to create a click-able button for viewing more information, it fails and only shows the unique identifier.
Please advise what am I not doing correctly at the mRenderProp?
Below is my script that generates the data-table :
<script type="text/javascript">
$(document).ready(function () {
Draw();
function Draw() {
$('#example_ta').dataTable({
"bJQueryUI": true,
"bautoWidth": false,
"aoColumns": [
{"sTitle": "Delivery Date", "mDataProp": "delivery_date"},
{"sTitle": "Delivery No.", "mDataProp": "delivery_no"},
{"sTitle": "Unit Code", "mDataProp": "unit_code"},
{"sTitle": "Driver Code.", "mDataProp": "driver_code"},
{"sTitle": "Zone Name.", "mDataProp": "zone_name"},
{"sTitle": "Zone Rate", "mDataProp": "zone_rate"},
{"sTitle": "Tonnage", "mDataProp": "tonnage"},
{"sTitle": "Standard Tonne", "mDataProp": "standard_tonne"},
{"sTitle": "View", "mDataProp": "delivery_id",
"mRenderProp": function (data, type, full) {
return '<button class="show-data btn btn-small btn-primary" id = ' + data + ' >View</button>';
}
},
],
"bDeferRender": true,
"bProcessing": true,
"bDestroy": true,
"bLengthChange": true,
"iDisplayLength": 10,
"sAjaxDataProp": "",
"sAjaxSource": '<?php echo site_url() . "admin_profile/getDeliveries/"; ?>',
"aaSorting": [[3, "asc"]]
});
}
});
</script>
<table class="example_ta" id="example_ta">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
It's just mRender not mRenderProp - see docs
{"sTitle": "View", "mDataProp": "delivery_id",
"mRender": function (data, type, full) {
return '<button class="show-data btn btn-small btn-primary" id = ' + data + ' >View</button>';
}