backup

binxie

2023-06-26 410599fdf4f96d7f19b51bc28e544fa4e8780a1e

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<template>
    <template if:true={records}>
        <div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread">
            <div class="slds-col"><!--RECORDS PER PAGE-->
                <div style={paginationVisibility} 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-col">
                <div if:true={showSearchBox}>
                    <div class="slds-p-horizontal_x-small slds-p-bottom_xx-small">
                        <lightning-input label="" type="search" placeholder="Search" variant="label-hidden" onchange={handleKeyChange}></lightning-input>
                    </div>
                </div>
            </div>         -->
        </div>
 
        <div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread">
            <div class="slds-col">             
                <div class="slds-col slds-p-bottom_xx-small">
                    <span>
                        <label class="slds-text-color_weak slds-p-horizontal_x-small" >Total: {filtredNum}</label>  
                    </span>  
                    <span>
                        <label class="slds-text-color_weak slds-p-horizontal_x-small" >Selected: {totalSelected}</label>  
                    </span>                                                                                               
                </div>
            </div>
        </div> 
        
 
        <div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread" >
            <div class="slds-col" style={tableHeightStyle}>
                <lightning-datatable key-field={keyField} 
                    hide-checkbox-column = {hidecheckboxcolumn}
                    data={recordsToDisplay} 
                    columns={columns}
                    max-row-selection={maxRowSelection} 
                    onrowselection={getSelectedRows}   
                    selected-rows={preSelected}    
                    default-sort-direction={defaultSortDirection}
                    sorted-direction={sortDirection}
                    sorted-by={sortedBy}
                    onsort={handelSort}
                    show-row-number-column = {showrownumber}>
                </lightning-datatable>              
            </div>
        </div>    
 
        <div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread" style="padding-top: 0.5em;">
            <div class="slds-col"></div>
            <div class="slds-col"></div>
            <!--PAGE NAVIGATION-->
            <div class="slds-col">
                <div style={paginationVisibility}>                 
                    <div class="slds-col slds-p-bottom_xx-small">                     
                        <span>
                            <lightning-button-icon icon-name="utility:chevronleft" variant="bare" size="medium" alternative-text="Previous Page" onclick={previousPage}></lightning-button-icon>
                        </span>
                        <label class="slds-text-color_weak slds-p-horizontal_x-small" for="pageNum">Page:</label> 
                        <input type="number" id="pageNum" value={pageNumber} maxlength="4" onkeypress={handlePageNumberChange} class="customInput" title="Go to a Page"></input>
                        <span>&nbsp;of&nbsp;<b id="totalPages">{totalPages}</b></span>
                        <span>
                            <template if:true={pageNumber}></template>
                            <lightning-button-icon icon-name="utility:chevronright" variant="bare" size="medium" alternative-text="Next Page" onclick={nextPage} class="slds-p-horizontal_x-small"></lightning-button-icon>
                        </span>                                                          
                    </div>
                </div>
            </div>      
        </div>
 
    </template>    
</template>