Subversion Repositories SmartDukaan

    ## Filter and Search

    <div class="col-lg-12" style="margin-bottom: 15px;">

        <div class="row">

            <div class="col-lg-3">

                <label style="margin-right: 10px;"><strong>Filter:</strong></label>

                <select id="holdFilterSelect" class="form-control" style="width: 150px; display: inline-block;">

                    <option value="pending" #if($holdFilter == "pending") selected #end>Pending</option>

                    <option value="hold" #if($holdFilter == "hold") selected #end>On Hold</option>

                    <option value="all" #if($holdFilter == "all") selected #end>All</option>

                </select>

            </div>

            <div class="col-lg-6">

                <label style="margin-right: 10px;"><strong>Search:</strong></label>

                <input type="text" id="designTatSearch" class="form-control"

                       style="width: 250px; display: inline-block;"

                       placeholder="Outlet, Phone, Code, City..." value="$!search">

                <button type="button" class="btn btn-primary" id="designTatSearchBtn" style="margin-left: 5px;">

                    <i class="fa fa-search"></i> Search

                </button>

                #if($search && $search != "")

                    <button type="button" class="btn btn-default" id="clearDesignTatSearchBtn"

                            style="margin-left: 5px;">

                        Clear

                    </button>

                #end

            </div>

        </div>

    </div>

    ## Pagination Controls (Bottom)

    <div class="col-lg-12" style="margin-top: 15px;">

        <div class="row">

            <div class="col-lg-12 text-center">

                #if($totalRecords > 0)

                    <span class="pagination-info">Showing $startRecord - $endRecord of $totalRecords</span>

                    <ul class="pagination pagination-sm" style="margin: 0 15px; display: inline-flex;">

                        #if($currentPage > 0)

                            <li><a href="javascript:void(0)" class="design-tat-page-link" data-page="0">First</a></li>

                            <li><a href="javascript:void(0)" class="design-tat-page-link" data-page="$prevPage">Prev</a>

                            </li>

                        #else

                            <li class="disabled"><span>First</span></li>

                            <li class="disabled"><span>Prev</span></li>

                        #end

                        <li class="active"><span>Page $currentPageDisplay of $totalPages</span></li>

                        #if($currentPage < $lastPage)

                            <li><a href="javascript:void(0)" class="design-tat-page-link" data-page="$nextPage">Next</a>

                            </li>

                            <li><a href="javascript:void(0)" class="design-tat-page-link" data-page="$lastPage">Last</a>

                            </li>

                        #else

                            <li class="disabled"><span>Next</span></li>

                            <li class="disabled"><span>Last</span></li>

                        #end

                    </ul>

                    <select class="form-control design-tat-page-size" style="width: 120px; display: inline-block;">

                        <option value="10" #if($pageSize==10)selected#end>10 per page</option>

                        <option value="25" #if($pageSize==25)selected#end>25 per page</option>

                        <option value="50" #if($pageSize==50)selected#end>50 per page</option>

                        <option value="100" #if($pageSize==100)selected#end>100 per page</option>

                    </select>

                #end

            </div>

        </div>

    </div>

        // Handle filter change

        $('#holdFilterSelect').on('change', function () {

            refreshDesignTatList(0);

        // Search button click handler

        $('#designTatSearchBtn').on('click', function () {

            refreshDesignTatList(0);

        });

        // Search on Enter key

        $('#designTatSearch').on('keypress', function (e) {

            if (e.which === 13) {

                refreshDesignTatList(0);

            }

        });

        // Clear search button

        $('#clearDesignTatSearchBtn').on('click', function () {

            $('#designTatSearch').val('');

            refreshDesignTatList(0);

        });

        // Pagination link click handler

        $(document).on('click', '.design-tat-page-link', function (e) {

            e.preventDefault();

            refreshDesignTatList($(this).data('page'));

        });

        // Page size change handler

        $(document).on('change', '.design-tat-page-size', function () {

            refreshDesignTatList(0);

        });

        // Destroy existing DataTable if it exists

        if ($.fn.DataTable.isDataTable('#OnboardingDesign')) {

            $('#OnboardingDesign').DataTable().destroy();

          "paging": false,

          "bFilter": false,

    // Function to refresh design tat list via AJAX

    function refreshDesignTatList(page) {

        var holdFilter = $('#holdFilterSelect').val() || 'pending';

        var pageSize = $('.design-tat-page-size').val() || '25';

        var search = $('#designTatSearch').val() || '';

        var url = context + '/partnerOnBoardingDesign?holdFilter=' + encodeURIComponent(holdFilter)

                + '&page=' + (page || 0)

                + '&pageSize=' + pageSize

                + '&search=' + encodeURIComponent(search);

        $.ajax({

            url: url,

            type: 'GET',

            success: function (response) {

                $('#main-content').html(response);

            }

        });

        display: none !important;

    }

    td.hidden-col {

        display: none !important;

    }

    .pagination-info {

        margin-right: 15px;

        font-weight: bold;

    }

    .pagination {

        margin: 0;

    }

    .pagination li {

        display: inline-block;

        margin: 0 2px;

    }

    .pagination li a, .pagination li span {

        padding: 5px 10px;

        border: 1px solid #ddd;

        text-decoration: none;

        color: #333;

    }

    .pagination li.active span {

        background-color: #337ab7;

        color: white;

        border-color: #337ab7;

    }

    .pagination li.disabled span {

        color: #999;

        cursor: not-allowed;

    }

</style>