11522 sujets

JavaScript, DOM et API Web HTML5

Rajout des liens "début" et "fin" dans une jquery array pagination

bonjour à tous Smiley cligne
Voilà je suis débutant en jquery, je voudrais réaliser un système de "live search" sur un large tableau ou un fichier json, j'ai déjà réussi la partie recherche, j'ai trouvé la partie pagination, mais elle est très élémentaire!...(trop de pages)
Ma question c'est d'améliorer cette pagination en lui rajoutant un lien (début), (fin) pour commencer et pourquoi pas un (suivant et un (précédent)...merci d'avance.
voilà le code de la pagination:

<html>
<head>
    <title>Jquery Array Pagination</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
</head>
<body>
    <p>
    <select id="row_select">
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    entries per page</p>
    <div class="entries">
        
    </div>
    <span class="pagination-buttons">
        
    </span>
    <script type="text/javascript">
        // array to be shown
        const arr = ['one','two','three','four','five','six','seven','eight','nine'];
        // entries per page, default at start is 2
        var epp = 2;
        // number of pages
        var np = Math.ceil(arr.length/epp);
        // drow buttons
        $(draw_buttons());
        // show first page
        $(show_page(1));

        function draw_buttons() {
            for (let i = 1; i <= np; i++) {			    
                const t = create_button(i);
                $('.pagination-buttons').append(t);
            }
        }

        function create_button(value) {
            const button = $(document.createElement('span'));
			button.html(`<button class="page-button" id="page-${value}">${value}</button>`);			
            return button;
        }

        function create_entry(entry_id) {
            const entry = $(document.createElement('p'));
            entry.attr({'class':'entry'});
            entry.html(`${arr[entry_id]}`);
            return entry;
        } 
        function show_page(page_id) {
            $('.entries').text('');
            for(let i = (page_id - 1) * epp; i < page_id * epp && i < arr.length; i++) {
                $('.entries').append(create_entry(i));
            }
        }
        $('.pagination-buttons').on('click', '.page-button',function(){
            const page_id = $(this).text();
            show_page(page_id);
        })

        $(document).on('change','#row_select', function(){
            epp = this.value;
            np = Math.ceil(arr.length/epp); 
            $('.pagination-buttons').text('');
            draw_buttons();
            show_page(1);
        })
    </script>
</body>   
</html>
Sujet clos
Aller à