newclass0626formate

binxie

2023-06-26 d3e4451e36fbe25da4427bccd4e6b41aefd473c8

 force-app/main/default/lwc/lwcDatatableUtility/lwcDatatableUtility.html

@@ -1,32 +1,13 @@
<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-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>
                        <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>
@@ -41,101 +22,59 @@
            </div>         -->
        </div>

        <div
            class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread"
        >
            <div class="slds-col">
        <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>
                        <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>
                        <label class="slds-text-color_weak slds-p-horizontal_x-small" >Selected: {totalSelected}</label>  
                    </span>                                                                                               
                </div>
            </div>
        </div>
        </div> 
        

        <div
            class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread"
        >
        <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}
                <lightning-datatable key-field={keyField} 
                    hide-checkbox-column = {hidecheckboxcolumn}
                    data={recordsToDisplay} 
                    columns={columns}
                    max-row-selection={maxRowSelection}
                    onrowselection={getSelectedRows}
                    selected-rows={preSelected}
                    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>
                    show-row-number-column = {showrownumber}>
                </lightning-datatable>              
            </div>
        </div>
        </div>    

        <div
            class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread"
            style="padding-top: 0.5em"
        >
        <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">
                <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>
                            <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
                        >
                        <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>
                            <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>      
        </div>
    </template>

    </template>    
</template>