Ajax load: добавление всей страницы снова в элемент

Question

У меня есть страница со списком. по умолчанию я показываю 10 строк результатов. если строки больше 10, я показываю нагрузку больше. когда пользователь нажимает на нагрузку больше, я хочу показать еще 10 результатов. но когда я нажимаю на кнопку «загрузить больше», он снова добавляет всю страницу в таблицу внутри строк. какие-либо предложения?

Страница листинга:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
    var job_count = 10;
    $('#loadMoreJobs').click(function() {
        job_count += 10;
        $('#latestJobs').load('load_jobs.php', {
           job_count: job_count
        });
    });
});
</script>

<tbody id="latestJobs">
    <?php

    $jobs = find_jobs_by_status('active', 10);

    if (mysqli_num_rows($jobs) < 1) {

        echo '<tr class="job-listing-body">';
        echo '<td colspan="6">No jobs found.</td>';
        echo '</tr>';
    } else {
        while ($job = mysqli_fetch_assoc($jobs)) {
            echo '<tr class="job-listing-body">';
            echo '<td>' . $job['updated_at'] . '</td>';
            echo '<td><a href="job_apply?job=' . $job['job_id'] . '">' . $job['title'] . '</a></td>';
            echo '<td>0/' . $job['required_freelancers'] . '</td>';
            echo '<td>' . $job['delivery_time'] . ' days</td>';
            echo '<td>' . $job['budget'] . '</td>';
            echo '<td><a href="job_apply?job=' . $job['job_id'] . '" class="btn btn-sm btn-apply-inv w-md waves-effect waves-light">Apply</a></td>';
            echo '</tr>';
        }
    }

    ?>
</tbody>

<button class="btn btn-secondary w-md waves-effect waves-light" id="loadMoreJobs">Load More</button>

Загрузить больше строк Страница:

<?php

    require_once('includes/initialize.php');

    if (isset($_POST['job_count'])) {

        $job_count = $_POST['job_count'];

        $result = find_jobs_by_status('active', $job_count);

        if (mysqli_num_rows($result) < 1) {

            echo '<tr class="job-listing-body">';
            echo '<td colspan="6">No jobs found.</td>';
            echo '</tr>';

        } else {

            while ($job = mysqli_fetch_assoc($result)) {
                echo '<tr class="job-listing-body">';
                echo '<td>' . $job['updated_at'] . '</td>';
                echo '<td><a href="job_apply?job=' . $job['job_id'] . '">' . $job['title'] . '</a></td>';
                echo '<td>0/' . $job['required_freelancers'] . '</td>';
                echo '<td>' . $job['delivery_time'] . ' days</td>';
                echo '<td>' . $job['budget'] . '</td>';
                echo '<td><a href="job_apply?job=' . $job['job_id'] . '" class="btn btn-sm btn-apply-inv w-md waves-effect waves-light">Apply</a></td>';
                echo '</tr>';
            }

            mysqli_free_result($result);

        }

    } else {
        redirect_to('jobs');
    }

?>

Answer 1

Если вы сделаете это на странице со списком, было бы лучше

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script>
$(document).ready(function() {
     var job_count = 10;
    $('#loadMoreJobs').click(function() {
        job_count += 10;   
        $.ajax({
            type: 'post',
            url: 'load_jobs.php',
            data: {
                job_count:job_count
            },
            success: function (response) {
                var content = document.getElementById("job_display");
                content.innerHTML = response;
            }
        });

    });
});
</script>

<tbody id="latestJobs">
    <?php

    $jobs = find_jobs_by_status('active', 10);

    if (mysqli_num_rows($jobs) < 1) {

        echo '<tr class="job-listing-body">';
        echo '<td colspan="6">No jobs found.</td>';
        echo '</tr>';
    } else {
        while ($job = mysqli_fetch_assoc($jobs)) {
            echo '<tr class="job-listing-body">';
            echo '<td>' . $job['updated_at'] . '</td>';
            echo '<td><a href="job_apply?job=' . $job['job_id'] . '">' . $job['title'] . '</a></td>';
            echo '<td>0/' . $job['required_freelancers'] . '</td>';
            echo '<td>' . $job['delivery_time'] . ' days</td>';
            echo '<td>' . $job['budget'] . '</td>';
            echo '<td><a href="job_apply?job=' . $job['job_id'] . '" class="btn btn-sm btn-apply-inv w-md waves-effect waves-light">Apply</a></td>';
            echo '</tr>';
        }
    }

    ?>
</tbody>
<div id="job_display"></div>
<button class="btn btn-secondary w-md waves-effect waves-light" id="loadMoreJobs">Load More</button>