My code is as below
<v-server-table url="/campaigns" :columns="columns" :options="options">
</v-server-table>
data () {
return {
columns: ['name', 'start_date', 'end_date', 'partner', 'campaign_type', 'creation_date', 'created_by', 'campaign_status'],
options: {
compileTemplates: true,
filterByColumn: true,
perPage: 20,
texts: {
filter: 'Filter:',
filterBy: 'Filter by {column}',
count: ' ',
limit: 'Records: '
},
datepickerOptions: {
showDropdowns: true,
autoUpdateInput: false
},
pagination: { chunk: 10, dropdown: false },
filterable: ['name', 'start_date', 'end_date', 'partner', 'campaign_type', 'creation_date', 'created_by', 'campaign_status'],
sortable: ['name', 'start_date', 'end_date', 'partner', 'campaign_type', 'creation_date', 'created_by', 'campaign_status'],
headings: {
name: 'Campaign Name',
start_date: 'Start Date',
end_date: 'End Date',
id: 'CampaignId',
partner: 'Partner',
campaign_type: 'Campaign Type',
creation_date: 'Creation Date',
campaign_status: 'Status',
created_by: 'Created By'
}
}
}
}
}
I don't want to use direct url in the v-server-table. I have defined a function in vuex store and I want to use that function to the data using that function rather than using a URL.
how can I do that?
Use the requestFunction option listed in the documentation for Server Side in https://www.npmjs.com/package/vue-tables-2
In the function you can define your own get request function and can omit the url attribute from the table. There is an example in the docs linked above.
Related
Using Vuetable-2 with laravel but keep getting the error
[Vue warn]: Unknown custom element: <vuetable-field-component:account-details> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
For both the the account-details and account-actions components.
Even though i have already registered the components. Here is the code.
// TableAccounts.vue
<template>
<base-vuetable :api-url="route" :fields="fields" :sort-order="sortOrder">
</base-vuetable>
</template>
<script>
import BaseVuetable from './BaseVuetable.vue';
import AccountActions from './AccountActions.vue';
import AccountDetails from './AccountDetails.vue';
Vue.component('account-actions', require('./AccountActions.vue').default);
Vue.component('account-details', require('./AccountDetails.vue').default);
let fields = [
{
name: '__component:account-details',
title: '',
},
{
name: 'email',
title: 'Email',
sortField: 'email',
callback: (value) => this.email(value)
},
{
name: 'fullname',
title: 'Fullname',
sortField: 'fullname'
},
{
name: 'company',
title: 'Company',
sortField: 'company',
},
{
name: 'role_name',
title: 'Role',
sortField: 'type'
},
{
name: 'active',
title: 'Status',
sortField: 'active',
callback: (value) => this.active(value)
},
{
name: 'signed_in_at',
title: 'Last Login',
sortField: 'signed_in_at',
callback: (value) => this.fromNow(value)
},
{
name: 'updated_at',
title: 'Last update',
sortField: 'updated_at',
callback: (value) => this.fromNow(value)
},
{
titleClass: 'account__actions-button',
name: '__component:account-actions',
title: '',
}
]
export default {
components: {
BaseVuetable,
AccountActions,
AccountDetails
},
props: {
route: {
type: String,
default: ''
}
},
data() {
return {
fields,
sortOrder: [
{
field: 'updated_at',
sortField: 'updated_at',
direction: 'desc'
}
],
}
}
...
}
Any idea why? I have even registred the components globally. If i debug the global components they are there.
I have a datatable view that shows some post from user, I want to create a datatable with a button that can show all user post. But, when moving from all post lists to user post lists I cant get user_id from the URL.
I want to get the user_id using $request->route.
Here is my controller:-
public function index(Request $request)
{
if ($request->ajax()) {
$request->route('detail');
$data = Post::where('user_id', $this->route('detail'))->latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function ($row) {
$btn = ' <span class="fas fa-info"></span>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('detail');
}
Here is my route:-
Route::resource('detail', DetailController::class);
datatable code
var table = $('.data-table').DataTable({
paging: true,
info: true,
autoWidth: false,
responsive: true,
columnDefs: [{
"targets": [0, 2, 3, 4, 5, 6], // your case first column
"className": "text-center",
},
],
language: {
paginate: {
next: '<span class="fas fa-arrow-right"></span>', // or '→'
previous: '<span class="fas fa-arrow-left"></span>' // or '←'
}
},
oLanguage: {
"oPaginate": {
next: '→', // or '→'
previous: '←' // or '←'
},
"sLengthMenu": "Tampilkan _MENU_ Item",
"sEmptyTable": "Tidak ada data",
"sInfoEmpty": "Tidak ditemukan",
"sLoadingRecords": "Sedang memproses - loading...",
"sInfo": "Menampilkan _START_ - _END_ dari _TOTAL_ Item",
"sSearch": "Cari:",
},
processing: true,
serverSide: true,
ajax: "{{ route('detail.index') }}",
columns: [{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
orderable: false,
searchable: false,
},
{
data: 'title',
name: 'title',
orderable: false,
},
{
data: 'content',
name: 'content',
orderable: false,
visible: false,
},
{
data: 'progress',
name: 'progress'
},
{
data: 'status',
name: 'status'
},
{
data: 'target_selesai',
name: 'target_selesai'
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
]
});
If I change the $this->route('detail') into user_id value, the program will work as expected. Is there something wrong with my code? thanks in advance
Change this:-
$this->route('detail')
To:-
$request->get('details')
And your ajax method should be like this:
"ajax": {
'type': 'POST',
'url': '{{ route('detail.index') }}',
'data': {
detilas: 'your id',
},
}
your roure:
Route::post('detail', DetailController::class);
I use laravel/datatables to list data.
I manipulated my datalist with addColumn function.
However I am not able to use search in view for added columns.
Because search is working according to database rows.
Datatables works fine but in the view search area is not working. Because there isnt any fullname row in database table.
Here you can find my codes (I want to search for fullname but I can't)
Order Model
public function getFullname()
{
return json_decode($this->getAttribute('delivery_adress'))->fullname;
}
OrderController.php
if ($request->ajax()) {
return datatables()->of(Order::query())
->addColumn('fullname', function (Order $order) {
return $order->getFullname();
})->addColumn('city', function (Order $order) {
return $order->getCity();
})->addColumn('product_id', function (Order $order) {
return $order->product->title;
})->make(true);
}
Orders Blade / Datatables code
"pageLength": 10,
processing: true,
serverSide: true,
ajax: 'orders',
columns: [
{ data: 'id', name: 'id'},
{ data: 'fullname', name: 'fullname', defaultContent: '-' , orderable: false },
{ data: 'city', name: 'city', defaultContent: '-', orderable: false },
{ data: 'product_id', name: 'product_id', className: 'd-none d-sm-table-cell', defaultContent: '-' },
{ data: 'totalPrice', name: 'totalPrice', className: 'd-none d-sm-table-cell', defaultContent: '-' },
],
edit:
Finally, I found solution
{data: 'added_column', name: 'actual_column_name'}
https://github.com/yajra/laravel-datatables/issues/139#issuecomment-275326787
Finally, I found solution
{data: 'added_column', name: 'actual_column_name'}
https://github.com/yajra/laravel-datatables/issues/139#issuecomment-275326787
Make sure to have relationship into Order model like this:
public function user()
{
return $this->belongsTo('App\User');
}
Try to update like this :
...
->addColumn('fullname', function (Order $order) {
return $order->user->fullname;
})
...
change status
serverSide : false
"pageLength": 10,
processing: true,
serverSide: false,
ajax: 'orders',
columns: [
{ data: 'id', name: 'id'},
{ data: 'fullname', name: 'fullname', defaultContent: '-' , orderable: false },
{ data: 'city', name: 'city', defaultContent: '-', orderable: false },
{ data: 'product_id', name: 'product_id', className: 'd-none d-sm-table-cell', defaultContent: '-' },
{ data: 'totalPrice', name: 'totalPrice', className: 'd-none d-sm-table-cell', defaultContent: '-' },
],
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'userlist': {
render: function() {
console.log('inside render event');
},
itemdblclick: this.onDbClickonGridRow
},
'newTable': {
render: function() {
console.log('inside table event');
},
// itemdblclick: this.onDbClickonGridRow
}
})
},
onDbClickonGridRow: function(event, e, eOpts) {
console.log(e.data);
var uForm = Ext.create('widget.newTable');
console.log(uForm);
uForm.loadRecord(e);//error here
}
});
This is my controller of the application
Ext.define('AM.view.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
initComponent: function() {
this.title= 'Modified title';
this.store = {
fields: ['name', 'email'],
data : [
{name: 'avi', email: 'avi#gmail.com'},
{name: 'abhi', email: 'abhi#gmail.com'},{name: 'Nikhil', email: 'n#gmail.com'},
{name: 'manu', email: 'manu#gmail.com'}
]
};
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
}
});
This is userList.js
This is the original panel from which i would like to send my data on double clicking the rows of the table to the newTable.js
var newTable=Ext.define('AM.view.newTable' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.newTable',
title: 'All Users',
initComponent: function() {
this.title= 'New title';
this.store = {
fields: ['name', 'email'],
};
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
}
});
This is an newTable.js into which i would like to insert my data into.
The problem here is that i am able to collect the data through e.data ,but the no idea how i can post it into the newTable.js from uform
You need to get the Store of the grid using getStore() and the add the record to it using add().
uForm.getStore().add(e);
Java application sends to the front the following json data:
{"data":[{"id":1,"name":"","password":"xxxxxxxxxxxxxxxxxxx","roles":[{"id":1,"name":"Administrator"}],"username":"admin"}]}
In the front I have an user model like the following:
Ext.define('App.store.Users', {
extend: 'Ext.data.Store',
fields: [
{name: 'id', type: 'auto'},
{name: 'name', type: 'auto'},
{name: 'password', type: 'auto'},
{name: 'roles', type: 'auto'},
{name: 'username', type: 'auto'},
],
autoLoad: true,
proxy: {
type: 'ajax',
url: '/web/user',
reader: {
type: 'json',
root: 'data'
}
}
});
Edit:
I updated the code and this way the data is loaded.
Also i made a grid so I can show the results.
Ext.define('App.view.Home', {
extend: 'Ext.panel.Panel',
alias: 'widget.home',
title: 'Home',
layout: 'fit',
items: [
{
xtype: 'gridpanel',
store: 'Users',
title: 'Users grid',
columns: [
{text: 'Id', dataIndex: 'id' },
{text: 'Username', dataIndex: 'username', width : 200 },
{text: 'Role', dataIndex: 'roles', width : 200 },
{text: 'Name', dataIndex: 'name', width : 200 },
]
}
]
});
Now the question that remains is that the grid is showing [object Object] how could i be showing the part that i want from that object, as the name of the role
You need to change the reader type to JSON, This code is working for me:
Fiddle
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('Users', {
extend: 'Ext.data.Store',
fields: ['id', {
name: 'username',
type: 'string'
}, {
name: 'name',
type: 'string'
}],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
Ext.create("Users", {
listeners: {
load: function() {
console.log("Loaded " + this.getCount() + " records");
}
}
});
}
});
I also removed the mappings as I don't think that you need them.
EDIT
In regards to the data showing in a grid, the 'roles' property in the JSON data is an array, that's why it's showing in the grid as object, I've updated the fiddle to show a possible way to get this information, But it's not the recommended method. You should probably look at associations in ExtJs for this.
Reviewing the guide on the Data Package may also help with this.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('Users', {
extend: 'Ext.data.Store',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'username',
type: 'string'
}, {
name: 'name',
type: 'string'
}, {
name: 'roles',
type: 'auto'
}],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
root: 'data'
}
},
listeners: {
load: function(store, records) {
console.log("Loaded " + this.getCount() + " records");
}
}
});
var users = Ext.create("Users");
Ext.define('App.view.Home', {
extend: 'Ext.panel.Panel',
alias: 'widget.home',
title: 'Home',
layout: 'fit',
items: [{
xtype: 'gridpanel',
store: users,
title: 'Users grid',
columns: [{
text: 'Id',
dataIndex: 'id'
}, {
text: 'Username',
dataIndex: 'username',
width: 200
}, {
text: 'Role',
dataIndex: 'roles',
width: 200,
renderer: function(v, metadata) {
return v[0].name;
}
}, {
text: 'Name',
dataIndex: 'name',
width: 200
}]
}]
});
Ext.create('App.view.Home', {
renderTo: Ext.getBody()
});
}
});