I am using datatables and it working fine in desktop but in mobile there is no data load to table. What is the problem?
Here is my code:
$('#users-table').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
scrollY: 300,
destroy: true,
processing: true,
serverSide: true,
responsive:true,
ajax: '/depart/get_datatable/',
columns: [
{ data: 'depart_name', name: 'departs.depart_name' },
{ data: 'levels', name: 'departs.levels' },
{ data: 'name', name: 'colleges.name' },
{ data: 'action', name: 'action',searchable:false, sortable: false,
className: 'text-right' }
]
});
the solution is add cache :false to ajax call
ajax:{
url:......,
cache:false
}
Related
I have 2 questions:
Anyone knows how to make the search bar and label in one line? (red circle) Currently its 2 lines.
Preferably using the dom attribute, if possible. Or any other simple and quick method.
How to remove the space between table header and body? (yellow space). css, js methods are welcomed!
Here's my datatables initialization:
table = $('#serviceItemList').DataTable({
processing: true,
serverSide: true,
scrollResize: false,
scrollY: 300,
scrollCollapse: true,
paging: false,
info: false,
createdRow: function (row, data, dataIndex) {
$(row).attr('data-id', data.id);
},
dom: 'Bfrtip',
ajax: {
'url': "/serviceitem/list",
'type': "POST",
'data': function (data) {
data.zone = zone;
}
},
columns: [
{ data: 'checkbox', name: 'items[]' },
{ data: 'DT_RowIndex', name: 'DT_RowIndex' },
{ data: 'zone', name: 'zone', orderable: true, },
{ data: 'code', name: 'code', orderable: true, },
{ data: 'description', name: 'description', searchable: true },
],
select: {
style: 'multi',
selector: 'td:first-child'
},
});
you can try it by inspecting the element and look for its class name and then you can set the display property to none
and for the search bar do the same and set the float property to left
I use vue-good-table object to render table in Vue.js. I use paging and sorting serverside.
My code:
<vue-good-table v-if="authorizations"
id="AuthorizationsTable"
ref="refToAuthorizationsTable"
#on-page-change="onPageChange"
#on-sort-change="onSortChange"
#on-column-filter="onColumnFilter"
#on-per-page-change="onPerPageChange"
mode="remote"
:columns="columns"
:rows="authorizations"
:totalRows="totalRecords"
:pagination-options="{
enabled: true,
mode: 'pages',
nextLabel: 'następna',
prevLabel: 'poprzednia',
ofLabel: 'z',
pageLabel: 'strona',
rowsPerPageLabel: 'wierszy na stronie',
allLabel: 'wszystko',
dropdownAllowAll: false
}"
:sort-options="{
enabled: true,
initialSortBy: {
field: 'id',
type: 'asc'
}
}">
(...)
export default {
name: 'AuthoritiesAdministration',
components: {},
data() {
return {
totalRecords: 0,
serverParams: {
columnFilters: {},
sort: {
field: 'id',
type: 'asc'
},
page: 1,
perPage: 10
},
rows: [],
columns: [
{
label: 'ID',
field: 'id',
type: 'number',
tdClass: 'vue-good-table-col-100'
},
{
label: 'Data wystawienia',
field: 'issueDate',
formatFn: this.formatDate,
tdClass: 'vue-good-table-col-200',
},
{
label: 'Nazwa operatora',
field: 'operator',
sortable: true,
formatFn: this.formatOperatorName,
},
{
label: 'Login',
field: 'operator.login'
},
{
label: 'Spółka',
field: 'company.description',
type: 'text',
},
{
label: 'Data ważności',
field: 'endDate',
type: 'text',
formatFn: this.formatDate,
},
{
label: 'Akcje',
field: 'btn',
tdClass: 'vue-good-table-col-250',
sortable: false
}
],
}
},
(...)
methods: {
updateParams(newProps) {
this.serverParams = Object.assign({}, this.serverParams, newProps);
},
onPageChange(params) {
this.updateParams({page: params.currentPage});
this.loadAuthorizations();
},
onPerPageChange(params) {
this.updateParams({
perPage: params.currentPerPage
});
this.loadAuthorizations();
},
onSortChange(params) {
this.updateParams({
sort: {
type: params[0].type,
field: params[0].field
}
});
this.loadAuthorizations();
},
onColumnFilter(params) {
this.updateParams(params);
this.loadAuthorizations();
},
loadAuthorizations() {
getAllAuthorizationsLightWithPagination(this.$store.getters.loggedUser.token, this.serverParams).then(response => {
this.totalRecords = response.data.totalRecords;
this.rows = response.data.authorizations;
}).catch(err => {
this.$showError(err, true);
});
},
I have noticed that there are sent 3 requests to the server instead of 1: there are called methods like onPageChange, onPerPageChange and onSortChange but only the first time when my page is loaded. It is unnecessary. I have one method in "mounted" section where I load the first 10 results (sorting and paging by default). It's common, well-known problem with vue-good-table? Or maybe should I add an additional flag to not to invoke these 3 methods unnecessarily when the page is loaded?
Your onSortChange method is called at the table loading because you made a initialSortBy with specific values. To remove this calling juste remove
initialSortBy: {
field: 'id',
type: 'asc'
}
from you table configuration, but your sort will not be set, so I think this should be a legit function call.
The onPerPageChange and onPageChange are triggered by the config below
:pagination-options="{
enabled: true,
...
}
just remove the colon before pagination-options to have a config like this
pagination-options="{
enabled: true,
...
}
Based on newly created Sencha Touch 2 app as it is learned here.
Then I'd like to add my nested list - hierarchical menu tree and found that doesn't matter - my store inline or my store read from json - nothing displayed inside tab 'Menu'.
What's wrong?
Important files / code fragments:
MVC section in app.js:
// MVC
views: [
'Main'
],
models: [
'MenuItem'
],
stores: [
'MenuTree'
],
view.Main.js:
Ext.define('MobilePost.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.data.TreeStore',
'Ext.dataview.NestedList',
'Ext.data.proxy.JsonP',
'MobilePost.store.MenuTree'
],
config: {
tabBarPosition: 'bottom',
items: [
{
// From tutorial, working
title: 'Home',
iconCls: 'home',
cls: 'home',
html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>'
].join("")
},
{
// From tutorial, working
xtype: 'nestedlist',
title: 'Blog',
iconCls: 'star',
displayField: 'title',
store: {
type: 'tree',
fields: [
'title', 'link', 'author', 'contentSnippet', 'content',
{ name: 'leaf', defaultValue: true }
],
root: {
leaf: false
},
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
},
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function( nestedList, list, index, element, post ) {
this.getDetailCard().setHtml(post.get('content'));
}
}
},
{
// Mine, not working
xtype: 'nestedlist',
title: 'Menu',
iconCls: 'settings',
store: 'MenuTree'
}
]
}
});
Model - model.MenuItem.js:
Ext.define('MobilePost.model.MenuItem', {
extend: 'Ext.data.Model',
config: {
fields: [
'id', // Menu item id for events
'text', // Menu item text
{ name: 'leaf', defaultValue: false }
]
}
});
Store - store.MenuTree.js:
Ext.define('MobilePost.store.MenuTree', {
extend: 'Ext.data.TreeStore',
requires: [ 'MobilePost.model.MenuItem' ],
type: 'tree',
defaultRootProperty: 'items',
config: {
model: 'MobilePost.model.MenuItem',
/*
// TODO: inline store - uncomment to use
root: {
items: [
{
id: 'settings',
text: 'Settings',
items: [
{
id: 'shift',
text: 'Working shift',
leaf: true
},
{
id: 'users',
text: 'Users',
leaf: true
},
{
id: 'cash',
text: 'Cash',
leaf: true
}
]
}
]
}*/
// TODO: JSON store - comment for inline store
proxy: {
type: 'ajax',
url: 'menu.json'
}
},
// TODO: JSON store - comment for inline store
root: {}
});
JSON - menu.json (valid, passed check by jsonlint.com):
{
"items": [
{
"id": "settings",
"text": "Settings",
"items": [
{
"id": "shift",
"text": "Working shift",
"leaf": true
},
{
"id": "users",
"text": "Operators",
"leaf": true
},
{
"id": "cash",
"text": "Cash",
"leaf": true
}
]
}
]
}
At what point your store is loaded? Shouldn't you use autoLoad:true in your store?
also if you don't want to create and load your store with application load you should manually create store whenever required and set it to list
var treeStore = Ext.create('MobilePost.store.MenuTree');
treeStore.load();
and use this as store attribute in your view
{
// Mine, not working
xtype: 'nestedlist',
title: 'Menu',
id: 'myListId',
iconCls: 'settings',
store: treeStore
}
OR set the store if view is already created
Ext.getCmp('myListId').setStore(treeStore);
I've got the flollowing issue:
I'm building a TreePanel with data of people but I don't know how to define the model of it without defineing : leaf, cls and text attributes. I wan't that "Name" would be the node text of each node .
My model is defined as following:
Ext.define('People', {
extend: 'Ext.data.Model',
fields: [
{name: 'Name', type: 'string'},
{name: 'Surname', type: 'string'},
{name: 'Email', type: 'string'}
{name: 'BirthDate', type: 'string'}
]
});
My TreeStore (for the moment with static data, but it will be load from an ajax call to the server that will return a list of server person model). Obviously I don't want to define leaf, text and cls attributes in my server model:
Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{
"Name":"Juan",
"Surname":"Hoz",
"Email": "user#domain.com",
"BirthDate":"19801205"
},
{
"Name":"Marta",
"Surname":"Hoz",
"Email": "user2#domain.com",
"BirthDate":"19831210"
}
}
});
My TreePanel is defined as following:
Ext.create('Ext.tree.Panel', {
id: 'treePersonId',
store: mystore,
hideHeaders: true,
rootVisible: false,
title: 'Persons',
collapsible: true,
resizable:true
});
Can anyone helps me to find the correct way to do this?
Thank you very much,
Juan
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [{
name: 'Name',
type: 'string'
}, {
name: 'Surname',
type: 'string'
}, {
name: 'Email',
type: 'string'
}, {
name: 'BirthDate',
type: 'string'
}]
});
Ext.require('*');
Ext.onReady(function() {
var store = Ext.create('Ext.data.TreeStore', {
model: 'Person',
root: {
expanded: true,
children: [{
"Name": "Juan",
"Surname": "Hoz",
"Email": "user#domain.com",
"BirthDate": "19801205"
}, {
"Name": "Marta",
"Surname": "Hoz",
"Email": "user2#domain.com",
"BirthDate": "19831210"
}]
}
});
Ext.create('Ext.tree.Panel', {
renderTo: document.body,
store: store,
hideHeaders: true,
rootVisible: false,
columns: [{
xtype: 'treecolumn',
dataIndex: 'Name',
flex: 1
}]
});
});
Im just trying to simply load some json data into my combobox using a basic data store. Here is my json data:
{"services": [{"id": 1, "name": "dropbox"}, {"id": 2, "name": "facebook"}, {"id": 3, "name": "twitter"}]}
Here is my extjs 4 code:
Ext.onReady(function(){
Ext.define('ServiceList', {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'ServiceList',
proxy: {
type: 'json',
url: '/account/service/list',
reader: {
root: 'services',
totalProperty: 'totalCount'
}
}
});
store.load();
Ext.create('Ext.panel.Panel', {
layout: 'auto',
title: 'VAC',
width: '100%',
renderTo: 'vac-app-window',
items: [{
xtype: 'tabpanel',
autoTabs:true,
activeTab: 0,
border:false,
defaults: {autoHeight:true, bodyStyle:'padding:10px'},
items: [{
title: 'Data Services',
items: [{
xtype:'combo',
store:store
}]
}]
}]
});
});
Everything is being done on localhost so no cross domain stuff. I've been going through documentation but just can't figure out what im doing wrong.
As always any tips is much appreciated!
Update:
I edited some changes to the datastore and am getting a bit farther:
Ext.define('ServiceList', {
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'name', type:'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'ServiceList',
proxy: {
type: 'ajax',
url: '/account/service/list',
reader: {
root: 'services',
type: 'json'
}
}
});
store.load();
Now when the page loads or I attempt to click the combobox the url it is addressing is:
GET /account/service/list?_dc=1318340688155&page=1&start=0&limit=25
From my reading this looks like jsonp but I dont know where the page,start, and limit params come from?
Update2:
Thanks to the help from Molecule Man I was able to sort this out:
Ext.onReady(function(){
Ext.define('ServiceList', {
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'name', type:'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'ServiceList',
autoLoad: true,
proxy: {
limitParam: undefined,
startParam: undefined,
paramName: undefined,
pageParam: undefined,
noCache:false,
type: 'ajax',
url: '/account/service/list',
reader: {
root: 'services'
}
}
});
Ext.create('Ext.panel.Panel', {
layout: 'auto',
title: 'VAC',
width: '100%',
renderTo: 'vac-app-window',
items: [{
xtype: 'tabpanel',
autoTabs:true,
activeTab: 0,
border:false,
defaults: {autoHeight:true, bodyStyle:'padding:10px'},
items: [{
title: 'Data Services',
items: [{
xtype:'combo',
queryMode:'local',
emptyText: 'Select Service',
store:store,
displayField: 'name',
valueField: 'id'
}]
}]
}]
});
});
Hope this helps anyone else :)
Your combobox' config doesn't contain displayField (defaults to 'text') and valueField(defaults to displayField's value) which are required:
items: [{
xtype:'combo',
displayField: 'name',
valueField: 'id',
store:store
}]