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
Related
I'm currently facing the following problem:
I've created a simple line chart and filled it with example data.
But the tooltip doesn't show up.
I've tried using my config on the ECharts Website and there the tooltip is working.
option = {
title: {
text: 'Baum'
},
tooltip: {
trigger: 'item',
show: true,
showContent: true,
alwaysShowContent: true,
triggerOn: 'mousemove',
axisPointer:
{
label: {
show: true,
}
}
},
legend: {
data: ['lain', 'lain2']
},
xAxis:{
type: 'category',
data: ['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9', '10'],
boundaryGap: false,
},
yAxis: {
type: 'value'
},
series: [
{
name: 'lain',
type: 'line',
showSymbol: true,
data: [100,199,200,287,345,456,567,600,700,800],
smooth: true
},
{
name: 'lain2',
type: 'line',
showSymbol: true,
data: [111,158,231,296,374,495,596, 650,750,879],
smooth: true
}
],
animationDuration: 2000
}
}
In vue it's implemented like this:
<v-chart :options="option"></v-chart>
The data in the diagram itself is shown properly.
Thanks ahead.
I found a solution.
The import for the tooltip module has to imported explicitly.
import 'echarts/lib/component/tooltip'
With this import it's working.
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,
...
}
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
}
I have smartclient ListGrid with some columns. ListGrid has some text fields with edit mode (double click to enter) and boolean fields.
All I need to do is disable editMode for boolean fields (disable double click) and still enable normal 'one-click' to change boolean value.
Double click should work for other columns.
Any ideas?
My code:
isc.ListGrid.create({
ID: "ColumnsList",
saveLocally: true,
filterLocalData: true,
alternateRecordStyles: true,
canReorderRecords: true,
selectionAppearance: 'rowStyle',
autoFetchData: false,
showRollOver: true,
canRemoveRecords: true,
deferRemoval: false,
initWidget: function () {
this.Super('initWidget', arguments);
var me = this;
var fields = [
{name: 'id', primaryKey: true, required: true, showIf: 'false', canEdit: false, canHide: false},
{
name: 'name',
validOperators: [],
canEdit: true,
canHover: false,
canSort: false,
title: 'DB Column Name'
},
{
name: 'primaryKey',
validOperators: [],
width: '12%',
canEdit: true,
canHover: true,
canSort: false,
//canToggle: true,
title: 'Primary Key',
type: 'boolean',
changed: function (form, item, value) {
// my logic to allow only one value per column is selected
}
}
];
me.setFields(fields);
}
}
You may add recordDoubleClick:"return false" on the boolean field, to prevent the grid-level handler from firing.
isc.ListGrid.create({
ID: "countryList",
width:550, height:224, alternateRecordStyles:true,
// use server-side dataSource so edits are retained across page transitions
dataSource: countryDS,
// display a subset of fields from the datasource
fields:[
{name:"countryCode", title:"Flag", width:40, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png", canEdit:false},
{name:"countryName"},
{name:"continent"},
{name:"member_g8", recordDoubleClick:"return false"},
{name:"population"},
{name:"independence"}
],
autoFetchData: true,
canEdit: true
})
Alternatively if you want to disable double click on all boolean fields you could use the following:
isc.ListGrid.create({
rowDoubleClick: function (record, recordNum, fieldNum) {
if (this.getField(fieldNum).type != "boolean") {
this.Super("rowDoubleClick", arguments);
}
},
fields: [
{ name: "isActive", type: "boolean", canEdit: false },
{ name: "firstName", type: "text", canEdit: true },
{ name: "lastName", type: "text", canEdit: true },
],
data: [
{ isActive: false, firstName: "Alex", lastName: "Smith" },
{ isActive: true, firstName: "Jane", lastName: "Monroe" },
]
});
I'm not 100% I understood the question, but if you're looking for a way to allow/disallow the changing of boolean fields take a look at ListGridField.canToggle
I have a store on extjs4 that return a list of objects, and i want to set the reader property to be able to count the elements so i can use paging afterward.
For reference, the example that extjs use already comes with a count property(totalCount) and the type of object listed(topics), while mine dont have it, just the list.
for reference:
example
Also, in my code the grid doesnt recognize the limit of results per page, but the paging toolbar does:
var sm = Ext.create('Ext.selection.CheckboxModel');
Ext.define('Cliente', {
extend: 'Ext.data.Model',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'Nome',
type: 'string'
}, {
name: 'Email',
type: 'string'
}, {
name: 'RazaoSocial',
type: 'string'
}, {
name: 'TipoDeCliente',
type: 'string'
}],
idProperty: 'ID'
});
var store = Ext.create('Ext.data.Store', {
pageSize: 3,
model: 'Cliente',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'http://localhost:4904/Cliente/ObterClientes',
extraParams: {
nome: '',
tipopessoa: '',
email: '',
cpf: '',
estado: '',
cidade: '',
cep: ''
},
reader: {
type: 'json',
root: 'data'
},
simpleSortMode: true
},
sorters: [{
property: 'Email',
direction: 'DESC'
}]
});
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 500,
height: 250,
title: 'Array Grid',
store: store,
selModel: sm,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
columns: [{
id: 'gridid',
text: "ID",
dataIndex: 'ID',
hidden: true
}, {
text: 'Nome',
width: 150,
sortable: true,
dataIndex: 'Nome'
}, {
text: 'Tipo de Cliente',
width: 100,
sortable: true,
dataIndex: 'TipoDeCliente'
}, {
text: 'Email',
width: 150,
sortable: true,
dataIndex: 'Email'
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Exibindo clientes {0} - {1} of {2}',
emptyMsg: "Nenhum cliente"
}),
renderTo: 'clientes',
});
store.loadPage(1);
The store needs the total count to calculate the paging parameters and to show the total. Your server side implementation must change to add that count with your data.
Also load the data like this store.load(); instead of loadPage.
EDIT: you also have an extra comma here: renderTo: 'clientes', I would suggest running your code through JSLint.