Hi Support team. I’m using the object-table to create a table that has a multi-select like below:
-
Then I need to select all the items on the same page (not all items on the table), But I can’t find out the solution for this one ( I can select base on the index of each item for selection, but when I do some filter or sort, then my logic will not working fine).
So do you have any solution or idea for this one? Just “select all” on the current page. -
And another question about ‘on-state-change’ attribute of object-table, I want to get the action “change page” of the user, to disable or enable the button, So when the user changes the page, in the JS file, the value is changed, but the UI is updated quite slow (take the 30s - 1m), Do you know why?
XML file:
<object-table label="" query="jobs_array" loading="$: isLoading" init-state="$:initState()" limit="$: entries" mode="paginate" on-state-change="tableStateChanged($state)" empty-message="Your items will appear here">
<column-group heading="Jobs">
<column heading="Well" filter="true">{well_name}: {well_type} [{well_status}]</column>
<column heading="Job">{job_number}: {job_name}</column>
<column heading="Type" filter="true">{job_type}</column>
<column heading="Status" filter="true">{job_status}</column>
<column heading="Days on Well">{days_on_well}</column>
<column heading="Spud Date">{spud_date}</column>
<column heading="Locked By" filter="true">{$:getUserName($object)}</column>
<column show-if="$: RoleUtil.isAdmin()" filter="true" sort="false" sorting="false" style="$:getRowStyles($object)" fit="shrink">
<header-action on-press="$:selectAll()" icon="$: checkIcon()"/>
<edit-boolean value="$object.archived" on-change="$:valueChanged($object, newValue, oldValue)" />
</column>
</column-group>
<action on-press="$: jobOptions($selection)" icon="$: getJobSubscribeIcon($object)" />
<button-group mode="split">
<button on-press="$: onSelectEntries(15)" label="$: entries"/>
<button on-press="$: onSelectEntries(25)" label="25"/>
<button on-press="$: onSelectEntries(50)" label="50"/>
<button on-press="$: onSelectEntries(100)" label="100"/>
<button on-press="$: onSelectEntries(200)" label="200"/>
</button-group>
</object-table>
JS file:
var isLoading = false;
var isSelectAll = false;
function selectAll() { // when click icon select all (action header)
isSelectAll = !isSelectAll;
jobSelected = [];
if(page == 1){
for( var i = 0; i < (view.jobs_array.length >= entries ? entries : view.jobs_array.length); i++){
var job = view.jobs_array[i];
if (isSelectAll) {
job.archived = true;
job.save();
jobSelected.push(job.job_number);
} else {
job.archived = false;
job.save();
}
}
}else{
for( var i = entries*(page-1); i < (view.jobs_array.length >= entries*page ? entries*page : view.jobs_array.length); i++){
var job = view.jobs_array[i];
if (isSelectAll) {
job.archived = true;
job.save();
jobSelected.push(job.job_number);
} else {
job.archived = false;
job.save();
}
}
}
isJobSelected = jobSelected.length > 0 ? true : false;
}
var page = 1;
function tableStateChanged(state){ // on-state-change
if(page == state.page){
saveState = state;
}
if(page != state.page && isSelectAll){ // will take 30s - 1m to update UI??
isLoading = true;
component.dialog({ id: "confirm" }).show();
onReset();
}
page = state.page;
}
