newbackup0626

binxie

2023-06-26 dd004276162a2bf9d042ff0aaa569dc30a95d827

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<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"
                        />
                        <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>