demo20230512/Views/Partial/Product/Index.cshtml

<div class="survey_form" ng-style="{height: Survey_Height * 28 + 24 + 'px'}" style="padding: 28px 16px;">
    <div class="survey_form_body" ng-style="{height: sidebar.length * 28 + 'px'}" style="margin: 0; padding: 0;">
        <div class="tab_header_main">
            <div class="tab_header">
                <div class="active tab-toggle">
                    <div class="tab">@Resource.ProductList</div>
                </div>
            </div>
            <div class="tab_header">
                <div class="survey_order_btn_wrap tab-toggle">
                    <div class="survey_order_btn" ng-click="redirctToCreatePage()">
                        @Resource.StaticLabelNewProduct
                    </div>
                </div>
            </div>
        </div>
            <div class="tab_content card content_bg">
                <div style="margin: 20px">
                    <div class="body_content receive_tool_menu">
                        <form class="form-inline header_search" style="float: right">
                            <input class="form-control mr-sm-2" type="search" ng-model="searchText"
                                   placeholder="@Resource.StaticLabelGlobal_Search" aria-label="Search">
                        </form>
                    </div>

                    <div class="body_content"
                         ng-model="currentPage"
                         ng-init="currentPage = 1">
                        <div class="table-responsive">
                            <div class="table_overflow">
                                <table class="table">
                                    <!-- Table header -->
                                    <thead>
                                        <tr class="table-active" style="text-align:center">
                                            <th>
                                                <p>
                                                    @Resource.ProductName &nbsp;
                                                    <span class="order productName order-productName" ng-click="sortOrder('Name','asc')"><i class="bi bi-arrow-down-up"></i></span>
                                                    <span class="order-productName-asc order order-dir order-productName" ng-click="sortOrder('Name','desc')"><i class="bi bi-sort-up"></i></span>
                                                    <span class="order-productName-desc order order-dir order-productName" ng-click="sortOrder('Name','asc')"><i class="bi bi-sort-down"></i></span>
                                                </p>
                                            </th>

                                            <th>
                                                <p>
                                                    @Resource.ProductSpec &nbsp;
                                                    <span class="order productSpec order-productSpec" ng-click="sortOrder('SpecDescription','asc')"><i class="bi bi-arrow-down-up"></i></span>
                                                    <span class="order-productSpec-asc order order-dir order-productSpec" ng-click="sortOrder('SpecDescription','desc')"><i class="bi bi-sort-up"></i></span>
                                                    <span class="order-productSpec-desc order order-dir order-productSpec" ng-click="sortOrder('SpecDescription','asc')"><i class="bi bi-sort-down"></i></span>
                                                </p>
                                            </th>

                                            <th>
                                                <p>
                                                    @Resource.MaterialNo &nbsp;
                                                    <span class="order materialNo order-materialNo" ng-click="sortOrder('SerialNumber','asc')"><i class="bi bi-arrow-down-up"></i></span>
                                                    <span class="order-materialNo-asc order order-dir order-materialNo" ng-click="sortOrder('SerialNumber','desc')"><i class="bi bi-sort-up"></i></span>
                                                    <span class="order-materialNo-desc order order-dir order-materialNo" ng-click="sortOrder('SerialNumber','asc')"><i class="bi bi-sort-down"></i></span>
                                                </p>
                                            </th>
                                            <th></th>
                                        </tr>
                                        @*<tr></tr>*@
                                    </thead>
                                    <tbody>
                                        <!-- Table row -->
                                        <tr ng-repeat="product in productList | filter : searchText | orderBy : predicate : reverse | smarterLimitTo : 10 : (currentPage - 1) * 10">
                                            <td ng-bind="product.Name"></td>
                                            <td ng-bind="product.SpecDescription"></td>
                                            <td ng-bind="product.SerialNumber"></td>
                                            <td>
                                                <img style="cursor: pointer;"
                                                     ng-init="editIcon = 'edit'"
                                                     ng-src="@ViewBag.baseUrl/Browser_Local/img/{{ editIcon }}.png"
                                                     ng-click="redirectToEditPage(product.ID)"
                                                     ng-mouseenter="editIcon = 'edit_active'"
                                                     ng-mouseleave="editIcon = 'edit'" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <page passed-total-page="Math.ceil((productList | filter : searchText).length / 10)" passed-current-page="currentPage"></page>
                </div>
            </div>
        </div>
</div>
<style>
    .order {
        /*width: 15px;
        height: 20px;*/
        cursor: pointer;
        /*margin: 7px 0px 5px 0px;*/
    }

    .order-dir {
        display: none;
    }

    .header {
        display: flex;
        margin-left: 80px;
    }

    .header-materialNo {
        margin-left: 245px !important;
    }
</style>
<script>
    $(function () {
        $(".productName").on("click", function () {
            $(".productName").css("display", "none");
            $(".order-productName-asc").css("display", "inline-flex");
            $(".order-productName-desc").css("display", "none");
        });
        $(".order-productName-asc").on("click", function () {
            $(".productName").css("display", "none");
            $(".order-productName-asc").css("display", "none");
            $(".order-productName-desc").css("display", "inline-flex");
        });
        $(".order-productName-desc").on("click", function () {
            $(".productName").css("display", "none");
            $(".order-productName-asc").css("display", "inline-flex");
            $(".order-productName-desc").css("display", "none");
        });
        $(".order-productName").on("click", function () {
            $(".order-productSpec").css("display", "inline-flex");
            $(".order-productSpec-asc").css("display", "none");
            $(".order-productSpec-desc").css("display", "none");
            $(".order-materialNo").css("display", "inline-flex");
            $(".order-materialNo-asc").css("display", "none");
            $(".order-materialNo-desc").css("display", "none");
        });

        $(".productSpec").on("click", function () {
            $(".productSpec").css("display", "none");
            $(".order-productSpec-asc").css("display", "inline-flex");
            $(".order-productSpec-desc").css("display", "none");
        });
        $(".order-productSpec-asc").on("click", function () {
            $(".productSpec").css("display", "none");
            $(".order-productSpec-asc").css("display", "none");
            $(".order-productSpec-desc").css("display", "inline-flex");
        });
        $(".order-productSpec-desc").on("click", function () {
            $(".productSpec").css("display", "none");
            $(".order-productSpec-asc").css("display", "inline-flex");
            $(".order-productSpec-desc").css("display", "none");
        });
        $(".order-productSpec").on("click", function () {
            $(".order-productName").css("display", "inline-flex");
            $(".order-productName-asc").css("display", "none");
            $(".order-productName-desc").css("display", "none");
            $(".order-materialNo").css("display", "inline-flex");
            $(".order-materialNo-asc").css("display", "none");
            $(".order-materialNo-desc").css("display", "none");
        });


        $(".materialNo").on("click", function () {
            $(".materialNo").css("display", "none");
            $(".order-materialNo-asc").css("display", "inline-flex");
            $(".order-materialNo-desc").css("display", "none");
        });
        $(".order-materialNo-asc").on("click", function () {
            $(".materialNo").css("display", "none");
            $(".order-materialNo-asc").css("display", "none");
            $(".order-materialNo-desc").css("display", "inline-flex");
        });
        $(".order-materialNo-desc").on("click", function () {
            $(".materialNo").css("display", "none");
            $(".order-materialNo-asc").css("display", "inline-flex");
            $(".order-materialNo-desc").css("display", "none");
        });
        $(".order-materialNo").on("click", function () {
            $(".order-productName").css("display", "inline-flex");
            $(".order-productName-asc").css("display", "none");
            $(".order-productName-desc").css("display", "none");
            $(".order-productSpec").css("display", "inline-flex");
            $(".order-productSpec-asc").css("display", "none");
            $(".order-productSpec-desc").css("display", "none");
        });
    });
</script>