Fatal编程技术网
  • javascript/
  • Javascript 我的分页正在跳跃，我可以'；我想不出怎么修理它

Javascript 我的分页正在跳跃，我可以'；我想不出怎么修理它

javascript php jquery ajax pagination

Javascript 我的分页正在跳跃，我可以'；我想不出怎么修理它,javascript,php,jquery,ajax,pagination,Javascript,Php,Jquery,Ajax,Pagination,我正在制作一个产品列表页面，该页面使用AJAX调用发布用户输入的数据： 分页使用jQuery inView函数调用下一页 （NextPage.php）当查看loader.gif时 InfiniteScroll.js $(document).ready(function() { filter_data(); function filter_data() { var action = 'fetch_data'; //Pagination

我正在制作一个产品列表页面，该页面使用AJAX调用发布用户输入的数据：

  • 分页使用jQuery inView函数调用下一页 （NextPage.php）当查看
    loader.gif
    时

    InfiniteScroll.js

    • $(document).ready(function() {

    filter_data();

    function filter_data() {

        var action = 'fetch_data';

        //Pagination
        var nextPage = parseInt($('#pageno').val()) + 0;

        //Filters
        var minimum_wt = $('#hidden_minimum_wt').val();
        var maximum_wt = $('#hidden_maximum_wt').val();
        var shape = get_filter('shape');
        var color = get_filter('color');
        var enhancement = get_filter('enhancement');
        var matching = get_filter('matching');

        $.ajax( {

            url: 'vendors/php/Filters/FilterData.php',
            method: 'POST',
            data: {
                action: action, 
                pageno: nextPage,
                minimum_wt: minimum_wt, 
                maximum_wt: maximum_wt, 
                shape: shape, 
                color: color, 
                enhancement: enhancement, 
                matching: matching
            },
            async: true,
            error: 

                function(jqXHR, strError) {

                    if(strError == 'timeout') {

                        // Do something. Try again perhaps?
                        alert('Seems like there was an error loading the filters request.');

                    }

                },

            success:
                function(data) {

                    $('#StoneContainer').html(data);
                    $('#pageno').val(nextPage); 
                    $('.LoaderContainer').show();   //Show infinite scroll  

                },

            timeout: 3000

        });

    }

    // Where to find values to be filtered
    function get_filter(class_name) {

        var filter = [];

        $('.'+class_name+':checked').each(function() {
            filter.push($(this).val());
        });

        return filter;

    }

    // Apply filter_data() of .common_selector
    $('.common_selector').click(function() {

        filter_data();

    });

    // Range slider
    $('#wt_range').slider({

        range: true,
        values: [2.5, 30],
        min: 2.5,
        max: 30,
        step: 0.1,
        slide: 
            function(event, ui) {

                // prevent thumbs from overlapping 
                if ((ui.values[1] - ui.values[0]) < 3) {

                    return false;

                }

                $('#wt_show').html(ui.values[0] + 'Ct - ' + ui.values[1] + 'Ct');
                $('#hidden_minimum_wt').val(ui.values[0]);
                $('#hidden_maximum_wt').val(ui.values[1]);

                filter_data();

            }

    });

    // open and close filters menu on mobile
    if ($('#StoneContainer').width() < 420 ) {

        $('.OpenCloseFilters').on('click', function() {

            $('.FiltersContainer').slideToggle();

            // refresh button
            $('.ResetFiltersToggle0').toggleClass('ResetFiltersToggle1');

            // change icon on toggle 
            $('#MenuIcon').toggleClass('mdi-menu-up mdi-menu-down');

        });

    }

});
NextPage.php

<?php

    if(isset($_GET['pageno']) || isset($_POST['action'])) {
        $pageno = $_GET['pageno'];
    } else {
        $pageno = $_POST['pageno'];
    }

    $limit = 10;
    $offset = ($pageno-1) * $limit;

    //Include database configuration file
    include('dbConfig.php');

    $SQL = "        
        SELECT
            number,
            image1,
            wt,
            TRUNCATE(length,1) as length,
            TRUNCATE(width,1) as width,
            CASE
                WHEN stonetype = 'SA' THEN 'Sapphire'
                WHEN stonetype = 'RU' THEN 'Ruby'
                WHEN stonetype = 'TML-P' THEN 'Paraiba'
                WHEN stonetype = 'EM' THEN 'Emerald'
                WHEN stonetype = 'TS' THEN 'Tsavorite'
                WHEN stonetype = 'SI' THEN 'Spinel'
                WHEN stonetype = 'GT' THEN 'Garnet'
                WHEN stonetype = 'BER' THEN 'Beryl'
                WHEN stonetype = 'TML' THEN 'Tourmaline'
                WHEN stonetype = 'KO' THEN 'Kornerupine'
                ELSE 'n/a'
            END AS 'stonetype',
            CASE                                    
                WHEN enhcode = 'H' THEN 'Heated'
                WHEN enhcode = 'N' THEN 'Unheated'
                ELSE 'n/a'
            END AS 'enhcode'
        FROM 
            stones
        WHERE 
            wt >= 2.5
    ";

    if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"])) {

        $SQL .= "

            AND wt BETWEEN '".$_POST["minimum_wt"]."' AND '".$_POST["maximum_wt"]."'

        ";
    }

    if(isset($_POST["shape"])) {

        $shape_filter = implode("','", $_POST["shape"]);

        $SQL .= "

            AND stoneshape IN('".$shape_filter."') 

        ";

    }

    if(isset($_POST["color"])) {

        $color_filter = implode("','", $_POST["color"]);

        $SQL .= "

            AND stonecolor IN('".$color_filter."')

        ";

    }

    if(isset($_POST["enhancement"])) {

        $enhancement_filter = implode("','", $_POST["enhancement"]);

        $SQL .= "

            AND enhcode IN('".$enhancement_filter."')

        ";

    }

    if(isset($_POST["matching"])) {

        $matching_filter = implode("','", $_POST["matching"]);

        $SQL .= "

            AND pair IN('".$matching_filter."')

        ";  

    }

    $SQL .= " 
        ORDER BY
            wt ASC
        LIMIT
            " . $offset. ",
            " . $limit. "

    ";

    $res_data = mysqli_query($db, $SQL);

    if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"]) && isset($_POST["shape"]) && isset($_POST["color"]) && isset($_POST["enhancement"]) && isset($_POST["matching"])) {

        while($row = mysqli_fetch_array($res_data)) {

            echo '  

            <div class="Stone">

                <!-- landing page -->
                <a href="#ItemPage" class="ItemLink" rel="modal:open" id="' . $row['number']. '">

                    <!-- image -->
                    <div class="StoneData StoneIMG"> <img src="../../../' . $row['image1'] . '"> </div>

                    <!-- weight --> 
                    <div class="StoneData">' . $row['wt'] . 'Ct</div>

                    <!-- type -->
                    <div class="StoneData">' . $row['stonetype'] . '</div>

                    <!-- enhancement -->
                    <div class="StoneData">' . $row['enhcode'] . '</div>

                    <!-- dimensions -->
                    <div class="StoneData">' . $row['length'] . ' x ' . $row['width'] . '</div>

                    <!-- item number -->
                    <div class="StoneData"># ' . $row['number'] . '</div>

                </a>

            </div>
            ';

        }

    }

?>

<?php

    if(isset($_POST['pageno']) || isset($_POST['action'])) {

        //Include database configuration file
        include('../dbConfig.php'); 

        $limit = 10;    
        $offset = !empty($_POST['pageno']) ? $_POST['pageno']: 0;

        $SQL = "

            SELECT
                number,
                image1,
                wt,
                TRUNCATE(length,1) as length,
                TRUNCATE(width,1) as width,
                CASE
                    WHEN stonetype = 'SA' THEN 'Sapphire'
                    WHEN stonetype = 'RU' THEN 'Ruby'
                    WHEN stonetype = 'TML-P' THEN 'Paraiba'
                    WHEN stonetype = 'EM' THEN 'Emerald'
                    WHEN stonetype = 'TS' THEN 'Tsavorite'
                    WHEN stonetype = 'SI' THEN 'Spinel'
                    WHEN stonetype = 'GT' THEN 'Garnet'
                    WHEN stonetype = 'BER' THEN 'Beryl'
                    WHEN stonetype = 'TML' THEN 'Tourmaline'
                    WHEN stonetype = 'KO' THEN 'Kornerupine'
                    ELSE 'n/a'
                END AS 'stonetype',
                CASE                                    
                    WHEN enhcode = 'H' THEN 'Heated'
                    WHEN enhcode = 'N' THEN 'Unheated'
                    ELSE 'n/a'
                END AS 'enhcode'
            FROM 
                stones
            WHERE 
                wt >= 2.5

        ";

        if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"])) {

            $SQL .= "

                AND wt BETWEEN '".$_POST["minimum_wt"]."' AND '".$_POST["maximum_wt"]."'

            ";

        }

        if(isset($_POST["shape"])) {

            $shape_filter = implode("','", $_POST["shape"]);

            $SQL .= "

                AND stoneshape IN('".$shape_filter."') 

            ";
        }

        if(isset($_POST["color"])) {

            $color_filter = implode("','", $_POST["color"]);

            $SQL .= "

                AND stonecolor IN('".$color_filter."')

            ";

        }

        if(isset($_POST["enhancement"])) {

            $enhancement_filter = implode("','", $_POST["enhancement"]);

            $SQL .= "

                AND enhcode IN('".$enhancement_filter."')

            ";

        }

        if(isset($_POST["matching"])) {

            $matching_filter = implode("','", $_POST["matching"]);

            $SQL .= "

                AND pair IN('".$matching_filter."')

            ";  

        }

        $SQL .= "

            ORDER BY wt ASC
            LIMIT 
                $offset,
                $limit

        ";

        $result = mysqli_query($db, $SQL);

        $output = '';

        if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"]) && isset($_POST["shape"]) && isset($_POST["color"]) && isset($_POST["enhancement"]) && isset($_POST["matching"])) {

            if($row = mysqli_fetch_array($result)) {

                foreach($result as $row) {

                    $output .= '

                        <div class="Stone">

                            <!-- landing page -->
                            <a href="#ItemPage" class="ItemLink" rel="modal:open" id="' . $row['number']. '">

                                <!-- image -->
                                <div class="StoneData StoneIMG"> <img src="../../../' . $row['image1'] . '"> </div>

                                <!-- weight --> 
                                <div class="StoneData">' . $row['wt'] . 'Ct</div>

                                <!-- type -->
                                <div class="StoneData">' . $row['stonetype'] . '</div>

                                <!-- enhancement -->
                                <div class="StoneData">' . $row['enhcode'] . '</div>

                                <!-- dimensions -->
                                <div class="StoneData">' . $row['length'] . ' x ' . $row['width'] . '</div>

                                <!-- item number -->
                                <div class="StoneData"># ' . $row['number'] . '</div>

                            </a>

                        </div>

                    ';

                }

            }

        } else {

            $output = '

                <h1 class="Error">
                    <span class="mdi mdi-filter-remove mdi-48px"></span> 
                    NO STONES MATCH THAT
                </h1>

            ';

        }

        echo $output;
    }

?>

为什么你有两个Java脚本和两个PHP在这两个平台上做同样的事情？你需要简化并包含一些条件，这样你就可以使用1个Javascript和1个PHP来执行这两个操作，你可以有更多的控制，代码也更容易维护。我想这可能是我问题的根源。我最初开始分割代码以保持思维一致，因为我每周都在开发一个功能。现在我的分页出现了这个问题。我想你现在可以尝试更改这个
var nextPage=parseInt（$（'#pageno'）.val（））+0对于
var nextPage=0$（#pageno'）.val（0）在filter_data函数中。这似乎有效；我真的很丢脸。谢谢我会核对一下这个答案

<?php

    if(isset($_POST['pageno']) || isset($_POST['action'])) {

        //Include database configuration file
        include('../dbConfig.php'); 

        $limit = 10;    
        $offset = !empty($_POST['pageno']) ? $_POST['pageno']: 0;

        $SQL = "

            SELECT
                number,
                image1,
                wt,
                TRUNCATE(length,1) as length,
                TRUNCATE(width,1) as width,
                CASE
                    WHEN stonetype = 'SA' THEN 'Sapphire'
                    WHEN stonetype = 'RU' THEN 'Ruby'
                    WHEN stonetype = 'TML-P' THEN 'Paraiba'
                    WHEN stonetype = 'EM' THEN 'Emerald'
                    WHEN stonetype = 'TS' THEN 'Tsavorite'
                    WHEN stonetype = 'SI' THEN 'Spinel'
                    WHEN stonetype = 'GT' THEN 'Garnet'
                    WHEN stonetype = 'BER' THEN 'Beryl'
                    WHEN stonetype = 'TML' THEN 'Tourmaline'
                    WHEN stonetype = 'KO' THEN 'Kornerupine'
                    ELSE 'n/a'
                END AS 'stonetype',
                CASE                                    
                    WHEN enhcode = 'H' THEN 'Heated'
                    WHEN enhcode = 'N' THEN 'Unheated'
                    ELSE 'n/a'
                END AS 'enhcode'
            FROM 
                stones
            WHERE 
                wt >= 2.5

        ";

        if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"])) {

            $SQL .= "

                AND wt BETWEEN '".$_POST["minimum_wt"]."' AND '".$_POST["maximum_wt"]."'

            ";

        }

        if(isset($_POST["shape"])) {

            $shape_filter = implode("','", $_POST["shape"]);

            $SQL .= "

                AND stoneshape IN('".$shape_filter."') 

            ";
        }

        if(isset($_POST["color"])) {

            $color_filter = implode("','", $_POST["color"]);

            $SQL .= "

                AND stonecolor IN('".$color_filter."')

            ";

        }

        if(isset($_POST["enhancement"])) {

            $enhancement_filter = implode("','", $_POST["enhancement"]);

            $SQL .= "

                AND enhcode IN('".$enhancement_filter."')

            ";

        }

        if(isset($_POST["matching"])) {

            $matching_filter = implode("','", $_POST["matching"]);

            $SQL .= "

                AND pair IN('".$matching_filter."')

            ";  

        }

        $SQL .= "

            ORDER BY wt ASC
            LIMIT 
                $offset,
                $limit

        ";

        $result = mysqli_query($db, $SQL);

        $output = '';

        if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"]) && isset($_POST["shape"]) && isset($_POST["color"]) && isset($_POST["enhancement"]) && isset($_POST["matching"])) {

            if($row = mysqli_fetch_array($result)) {

                foreach($result as $row) {

                    $output .= '

                        <div class="Stone">

                            <!-- landing page -->
                            <a href="#ItemPage" class="ItemLink" rel="modal:open" id="' . $row['number']. '">

                                <!-- image -->
                                <div class="StoneData StoneIMG"> <img src="../../../' . $row['image1'] . '"> </div>

                                <!-- weight --> 
                                <div class="StoneData">' . $row['wt'] . 'Ct</div>

                                <!-- type -->
                                <div class="StoneData">' . $row['stonetype'] . '</div>

                                <!-- enhancement -->
                                <div class="StoneData">' . $row['enhcode'] . '</div>

                                <!-- dimensions -->
                                <div class="StoneData">' . $row['length'] . ' x ' . $row['width'] . '</div>

                                <!-- item number -->
                                <div class="StoneData"># ' . $row['number'] . '</div>

                            </a>

                        </div>

                    ';

                }

            }

        } else {

            $output = '

                <h1 class="Error">
                    <span class="mdi mdi-filter-remove mdi-48px"></span> 
                    NO STONES MATCH THAT
                </h1>

            ';

        }

        echo $output;
    }

?>