<template>
|
<lightning-card>
|
<div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread">
|
<div class="slds-col"><!--RECORDS PER PAGE-->
|
<div class="slds-list_inline slds-p-bottom_xx-small customSelect">
|
<label class="slds-text-color_weak slds-p-horizontal_x-small" for="recordsPerPage">Page Size:</label>
|
<div class="slds-select_container">
|
<select class="slds-select" id="recordsPerPage" onchange={handleRecordsPerPage}>
|
<template for:each={pageSizeOptions} for:item="option">
|
<option key={option} value={option}>{option}</option>
|
</template>
|
</select>
|
</div>
|
</div>
|
</div>
|
<div class="slds-align_absolute-center">
|
<lightning-layout>
|
<lightning-layout-item>
|
<lightning-button icon-name="utility:jump_to_left" onclick={handleFirst} class="first"
|
disabled={previousButtonDisabled}></lightning-button>
|
</lightning-layout-item>
|
<lightning-layout-item>
|
<lightning-button icon-name="utility:chevronleft" onclick={handlePrevious} class="previous"
|
disabled={previousButtonDisabled}></lightning-button>
|
</lightning-layout-item>
|
<lightning-layout-item flexibility="grow"></lightning-layout-item>
|
<span class="slds-badge slds-badge_lightest">
|
{recordStart}-{recordEnd} 共 {totalRecords}个
|
</span>
|
<lightning-layout-item>
|
<lightning-button icon-name="utility:chevronright" onclick={handleNext}
|
class="next" disabled={nextButtonDisabled}></lightning-button>
|
</lightning-layout-item>
|
<lightning-layout-item>
|
<lightning-button icon-name="utility:jump_to_right" onclick={handleLast} class="last"
|
disabled={nextButtonDisabled}></lightning-button>
|
</lightning-layout-item>
|
</lightning-layout>
|
</div>
|
</div>
|
</lightning-card>
|
</template>
|
