208 votes
0 answers
php - Advanced Filter datatable in laravel vue js
Get the solution ↓↓↓
Im having a trouble on how can I filter datatable in laravel vue js, depends on available data in my advanced filter when submit. My question is what should I use and where should I start , just need an idea to filter it based on data given?It would be great if anybody could help me out, thank you so much in advance!.
Advance filter dialog
<vdiaLog>
<template v-slot:body v-if="dialogshow == true">
<div class="form-group row">
<label class="col-3">Trip ticket</label>
<div class="col-9">
<div class="checkbox-inline">
<select class="form-control select2 details-input" id="kt_select_trip_ticket" name="trp_ticket">
<option label="Label"></option>
<option v-for="svc in filterDropdown.tripTicket" :key="svc.id" :value="svc.id">{{ svc.trip_ticket }}</option>
</select>
</div>
</div>
<label class="col-3">Service Provider</label>
<div class="col-9">
<div class="checkbox-inline">
<select class="form-control select2 details-input" id="kt_select_service_provider" name="service_provider">
<option label="Label"></option>
<option v-for="svc in filterDropdown.serviceProvider" :key="svc.id" :value="svc.id">{{ svc.company_name }} ({{ svc.type }})</option>
</select>
</div>
</div>
<div class="card-footer">
<button type="reset" class="btn btn-success mr-2">Search</button>
<button type="reset" class="btn btn-secondary">Cancel</button>
</div>
</div>
</template>
</vdiaLog>
*vue script *
export default {
data(){
return{
id: null,
trip_ticket: null,
created_at: null,
status: null,
status_class: null,
vehicles: [],
vehicle_image: null,
formFields: {
starting_odo: null,
ending_odo: null,
date_submitted_proc: null,
distance_travelled: null,
rate_per_km: null,
flat_rate: null,
no_nights: null,
rate_per_night: null,
remarks: null,
travel_date: null,
travel_time: null,
vehicle_id: null,
vehicle_name: null,
status: null,
total_cost: null
},
names: ['starting_odo', 'date_submitted_proc', 'rate_per_km', 'flat_rate', 'travel_date']
}
},
mounted(){
this.ini();
},
methods:{
ini() {
$(()=>{
this.tdatatable().init();
});
},
togglexl(){
//xlsx file here
},
togglecsv(){
//csv file here
},
tdatatable() {
let vm = this;
var initTable = () => {
var table = $('#list-travel-tbl');
table.DataTable({
searchDelay: 500,
scrollX: true,
scrollCollapse: true,
processing: true,
serverSide: true,
fixedColumns: {
leftColumns: false,
rightColumns: 1,
},
ajax: {
url: BASE_URL + '/tracking/listtravel',
type: 'GET'
},
columns: [
{ "data": "id" },
{ "data": "trip_ticket" },
{ "data": "company_name" },
{ "data": "travel_date" },
{ "data": "starting_odo" },
{ "data": "ending_odo" },
{ "data": "date_submit_proc" },
{ "data": "travelled" },
{ "data": "po_no" },
{ "data": "po_amount" },
{ "data": "rate_per_km" },
{ "data": "flat_rate" },
{ "data": "rate_per_night" },
{ "data": "nights_count" },
{ "data": "total_cost" },
{ "data": "is_status" },
{ "data": "remarks" },
{ "data": "created_at" },
{ "data": "id" }
],
columnDefs: [
{
targets: 1,
render: data => {
return '<span class="text-nowrap label label-lg font-weight-bold label-light-primary label-inline">'+data+'</span>';
}
},
{
targets: [9, 10, 11, 12, 14],
render: data => {
let values = (data)? toParseNum(data):'';
return values;
}
},
{
targets: [7, 13],
render: data => {
let values = (data)? data:'';
return values;
}
},
{
targets: [13, 16],
orderable: false,
},
{
targets: 17,
orderable: false,
render: data => {
return dateTimeEng(data);
}
},
{
targets: 15,
render: data => {
var status = {
1: {'title': 'Pending', 'class': ' label-light-warning'},
2: {'title': 'Approved', 'class': ' label-light-primary'},
3: {'title': 'Completed', 'class': ' label-light-success'},
};
if (typeof status[data] === 'undefined') {
return data;
}
return '<span class="label text-nowrap label-lg font-weight-bold ' + status[data].class + ' label-inline">' + status[data].title + '</span>';
},
},
{
targets: -1,
orderable: false,
render: data => {
return '\
<a href="javascript:;" data-id="'+ data +'" class="ml-5 btn-edit btn btn-sm btn-clean btn-icon" title="Edit details">\
<span class="svg-icon svg-icon-md">\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">\
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\
<rect x="0" y="0" width="24" height="24"/>\
<path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero"\ transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) "/>\
<rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1"/>\
</g>\
</svg>\
</span>\
</a>\
';
}
}
],
drawCallback: () => {
$('.btn-edit').off().on('click', function() {
let id = $(this).data('id');
vm.show(id);
});
}
});
};
return {
init: function() {
initTable();
},
};
},
}
}
Undefined asked
Share solution ↓
Additional Information:
Date the issue was resolved:
Link To Answer People are also looking for solutions of the problem: 403 this action is unauthorized.
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.