Subversion Repositories SmartDukaan

        ## Search Box

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

            <div class="row">

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

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

                    <input type="text" id="openSearch" class="form-control" style="width: 250px; display: inline-block;"

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

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

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

                    </button>

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

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

                            Clear

                        </button>

                    #end

                </div>

            </div>

        ## Pagination Controls (Bottom)

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

                <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="open-page-link" data-page="0">First</a></li>

                                <li><a href="javascript:void(0)" class="open-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="open-page-link" data-page="$nextPage">Next</a>

                                </li>

                                <li><a href="javascript:void(0)" class="open-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 open-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>

    <script>

        $(document).ready(function () {

            // Search button click handler

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

                refreshOpenList(0);

            });

            // Search on Enter key

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

                if (e.which === 13) {

                }

            });

            // Clear search button

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

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

                refreshOpenList(0);

            });

            // Pagination link click handler

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

                e.preventDefault();

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

            });

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

            });

            // Destroy existing DataTable if it exists (prevents reinitialization error)

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

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

            }

            var dtable = $('#oboardingopen').DataTable({

                "paging": false,  // Disable client-side pagination (server-side)

                "bFilter": false,  // Disable DataTables filter (we use server-side search)

        // Function to refresh open list via AJAX

        function refreshOpenList(page) {

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

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

            var url = context + '/partnerOnBoardingOpenShow?page=' + (page || 0)

                    + '&pageSize=' + pageSize

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

            $.ajax({

                url: url,

                type: 'GET',

                success: function (response) {

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

                }

            });

        }

    </script>

    <style>

        .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>