DataTables : Dropdown On change - php

First of all its not about filtering(searching) of drop-down.
I am using Datatables : where one of my column has drop-down , i want when i change or select any option from it ... its should pass to it resp value
$(document).ready(function () {
dt = $('#example').DataTable({
"pagingType": "full_numbers",
"scrollY": "440px",
"scrollX": "100%",
"scrollCollapse": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/server_processing.php",
"deferRender": true,
"aoColumns": [{
className: "center",
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": "",
},
{ className: "center", },
{ className: "center", },
{ className: "center", },
{ className: "center", },
{ className: "center", },
{ className: "center", },
],
"columnDefs": [{
"aTargets": [7],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).css('text-align', 'center');
},
"mData": null,
"mRender": function (data, type, full) {
return '<td><select id="dynamic_select" name="dynamic_select">\n\
<option id="0" value="">Select</option/>\n\
<option id="1" value="test.php">1</option/>\n\
<option id="2" value="test2.php">13</option/>\n\
<option id="31" value="test3.php">12</option/>\n\
</select></td>';
}
}]
});
$('select[name=dynamic_select]').on('change', function () {
var attvalue = $(this).children(":selected").attr("id");
var mainval = $(this).val();
var url = mainval;
if ($(this).children(":selected").attr("id") == 0) {
} else if ($(this).children(":selected").attr("id") == 1) {
window.open(url, "_self");
} else {
window.open(url, "_self");
}
return false;
});
});
below is my HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
<th></th>
</tr>
</tfoot>
</table>
All is working fine ... just on change of select value .. i need it should go to resp. Url with its resp. id
Also can i define each row a unique id ( or my database primary id ) ?
Note : if i put above jquery in my simple PHP then its working .. but don't know why its not working in data-tables
Please help me

Related

Hide the action column in Yajra datatables using gates

I'm pretty new to Laravel. I want to hide the Action column of the Yajra Datatable for specific users using Gates based on their roles.
I have been able to hide the buttons in the controller, but I want to hide the entire action column in the blade file so the users will not see it at all.
I have tried this
Jquery Codes
var table = $('.cdata-tables').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('clients.index') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'location', name: 'location'},
{data: 'description', name: 'description'},
{data: 'testimonial', name: 'testimonial'},
#can('view-actions'){data: 'action', name: 'action', orderable: false, searchable: false}#endcan,
],
columnDefs: [
{
render: function (data, type, full, meta) {
return "<div class='text-wrap width-200'>" + data + "</div>";
},
targets: [3]
}
]
});
HTML Codes
<table class="table table-striped table-bordered responsive cdata-tables" style="width:100%">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Location</th>
<th>Description</th>
<th>Testimonial</th>
#can('view-actions')
<th width="100px">Action</th>
#endcan
</tr>
</thead>
<tfoot>
<tr>
<th>No</th>
<th>Name</th>
<th>Location</th>
<th>Description</th>
<th>Testimonial</th>
#can('view-actions')
<th width="100px">Action</th>
#endcan
</tr>
</tfoot>
</table>
Controller codes
public function index(Request $request)
{
if ($request->ajax()) {
$data = Client::latest()->get();
$this->user = Auth::user();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = '';
if ($this->user->can('view-actions')){
$btn = '<i class="p-1 zmdi zmdi-edit"></i>';
$btn = $btn.' <i class="p-1 zmdi zmdi-delete"></i>';
};
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('admin.pages.client');
}
I just keep getting "Processing..." when I load the file on the browser on the Datatable. Please help out.

DataTable that fires onclick not drawing data that is in the ajax response

I have a DataTable that retrieves the data for the table on an onclick event.
It is working how intended, I can see the response firing in the background, and there is data in the response - however, it's not being loaded into the table.
.draw();
Appears to be the issue... had a look on the forum, tried solutions i can find but nothing seems to be working...
JS below.
var myTable = jQuery('.js-dataTable').DataTable({
dom: 'Bfrtip',
pagingType: "full_numbers",
columnDefs: [
{ orderable: false }
],
buttons: [],
searching: false,
pageLength: 12,
autoWidth: false,
info: false,
paging: false,
columns: [
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"}
],
rowCallback: function (row, data) {},
filter: false,
processing: true,
retrieve: true
});
$("#expand").on("click", function (event) {
$.ajax({
url: 'inc/ajax/tables/cash/get-data.php',
type: "post",
data: { account: '123456' }
}).done(function (result) {
myTable.clear().draw();
myTable.rows.add(result).draw();
});
});
EDIT TO ADD HTML:
<button id="expand" type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"></button>
<table class="table table-bordered table-striped table-vcenter js-dataTable">
<thead>
<tr>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
</thead>
</table>
EDIT 2:
data: Array(4)
0: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
1: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
2: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
3: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
length: 4
__proto__: Array(0)
__proto__: Object
Your issue is probably coming from the columns.data option.
When you specify "data": "ReturnedData" for a column, the datatable will search the content to display in result[x].ReturnedData, and as you haven't this key in your data (you have only result[x].ReturnedDataX keys), it displays nothing.
var myTable = jQuery('.js-dataTable').DataTable({
dom: 'Bfrtip',
pagingType: "full_numbers",
columnDefs: [
{ orderable: false }
],
buttons: [],
searching: false,
pageLength: 12,
autoWidth: false,
info: false,
paging: false,
columns: [
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"}
],
rowCallback: function (row, data) {},
filter: false,
processing: true,
retrieve: true
});
$("#expand").on("click", function (event) {
const result = dataFromAjax();
// Call ".draw()" once for performance.
myTable.clear();
myTable.rows.add(result).draw();
});
// Simulate ajax call
function dataFromAjax() {
return [
{ ReturnedData: 'After' },
{ ReturnedData: 'After 2' }
];
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<button id="expand" type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle">Expand</button>
<table class="table table-bordered table-striped table-vcenter js-dataTable">
<thead>
<tr>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
</thead>
<!-- testing purpose -->
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>

Render checkbox in DataTables

I have this table,
<table class="table is-fullwidth" id="users-table">
<thead>
<tr>
<th> </th>
<th> ID </th>
<th> FIRST NAME </th>
<th> LAST NAME </th>
<th> EMAIL </th>
<th> ROLE </th>
</tr>
</thead>
<tfoot>
<tr>
<th> </th>
<th> ID </th>
<th> FIRST NAME </th>
<th> LAST NAME </th>
<th> EMAIL </th>
<th> ROLE </th>
</tr>
</tfoot>
</table>
and dataTable javascript in my index.blade.php
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: 'systemusers/data',
columnDefs: [ {
orderable: false,
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]],
columns: [
{ data: 'select', name: 'select' },
{ data: 'id', name: 'id' },
{ data: 'first_name', name: 'users.first_name' },
{ data: 'last_name', name: 'users.last_name' },
{ data: 'email', name: 'users.email' },
{ data: 'role', name: 'roles.role' },
]
});
})
</script>
and this method in my controller
public function anyData()
{
$users = UserRole::selectRaw('users.id, users.first_name, users.last_name, users.email, roles.role')
->join('users', 'users.id', '=', 'user_roles.user_id')
->join('roles', 'roles.id', '=', 'user_roles.role_id');
return Datatables::of($users)
->addColumn('select', 'systemusers::data-table.checkbox')
->make(true);
}
and for data-table\checkbox.blade.php the content is this,
<input type="checkbox" name="" value="">
This is based on the documentation found here
https://yajrabox.com/docs/laravel-datatables/master/add-column and some example here https://datatables.yajrabox.com/eloquent/add-edit-remove-column
but when I look at the output, this was the result.
I print the checkbox html code, My question is how to render that into checkbox?
You can try {!! '<input type="checkbox" name="" value="">' !!} instead of {{ '<input type="checkbox" name="" value="">' }}
Since you are using the select extension and the checkbox is supposed to work along with that, you really not need to provide a checkbox yourself.
Just add className: 'select-checkbox' to the first column, i.e
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: 'systemusers/data',
columnDefs: [{
orderable: false,
targets: 0,
className: 'select-checkbox' //<--- here
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [
[1, 'asc']
],
columns: [
{ data: 'select', name: 'select' },
{ data: 'id', name: 'id' },
{ data: 'first_name', name: 'users.first_name' },
{ data: 'last_name', name: 'users.last_name' },
{ data: 'email', name: 'users.email' },
{ data: 'role', name: 'roles.role' },
]
});
See https://datatables.net/extensions/select/examples/initialisation/checkbox.html

DataTables row.add() not working Ajax Server side

I'm working on adding a new row in my datatable on button click. Here's my code:
HTML:
<table id="datatable-batches" class="table table-striped table-bordered forex-datatable">
<thead>
<tr>
<th>Batch #</th>
<th>Qty</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Batch #</th>
<th>Qty</th>
<th>Date</th>
</tr>
</tfoot>
</table>
Script:
<script type="text/javascript">
var table;
$(document).ready(function() {
//datatables
var batches_table = $('#datatable-batches').DataTable({
"processing": true, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [], //Initial no order.
"ajax": {
"url": "<?php echo site_url('oss/admin/ajax_batches'); ?>",
"type": "POST",
data: {
'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
},
dataSrc: function ( json ) {
if(json.csrf_token !== undefined) $('meta[name=csrf_token]').attr("content", json.csrf_token);
return json.data;
}
}
});
$(function() {
$('#new-batch').on('click', function(){
$('#receiving-box').css('display', 'block');
batches_table.row.add( ["3", "5", "2017-06-24 08:55:41"] ).draw();
});
});
});
</script>
Both are in the same file. When I hit the button, only the 'draw' number is increased but the data is still the same.
I also copied and pasted the example table here to make sure row.add() is working. Here's the debugger data for additional info.
Any help is highly appreciated. Thanks!

How to add row selection checkbox in data table?

Hi i want to add the row selection check box in data table, also need to add the check box against every row. So that it will select the row individually.
Thanks.
You can use following code
JS:
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
} );
} );
HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
</table>

Categories