AJAX call in Django project: Loading next 3 items from list

Question

I'm stuck on this ajax call. What I was trying to do was pull data from the data that is returned from the ajax call (return_data, also known as item_list) from the django views file in my project. The items are being pulled via alphabetical order, due to code in the django models module that I inputed. As I am new to Django, my problem is getting the ajax call to give the next 3 items in the return_data/item_list lists, via the click of the "show more button", and loading those on to the page. Can someone break down how I can go about doing this? Thank you in advance!

$(document).ready(function() {
    var config = {
        type: 'GET',
        url: SUBMIT_URL, //written in script tags in template , var SUBMIT_URL = "{%   //url 'get_next_concepts' %}"
        data: {

        },
        dataType: 'html',
        success: function (return_data, textStatus_ignored, jqXHR_ignored)  {
            alert("The AJAX call worked!" + return_data); //Just checks to make sure     
//data I need is returned
        }
    };
    $("#showmore").click(function() {
        $.ajax(config);
        $("table").append("<tr></tr>");
        for (var i = 0; i < 3; i++) {
            var itemdescription = return_data.index(i).description;
            var icon = return_data.index(i).icon;
            var itemName = return_data.index(i).icon;
            $("table tr:last").append(
                    generateCard(itemName,
                            itemdescription,
                            icon));
        }
    });

function generateCard(itemNameC, descriptionC, iconC) {     // Function to make card 
   //containing item information (name, icon and description
var card = "<td class='tablecells'><a class='tabletext' href='#'><span class='fa "
        + iconC
        + " concepticons'></span><h2 class='header'>"
        + itemNameC
        + "</h2><p>"
        + descriptionC
        + "<span class='fa fa-chevron-circle-right'></span></p></a></td>";
return card;
}

Answer 1

perhaps something like this:

var indexLast = 0;
$("#showmore").click(function() {
    $.ajax({
        type: 'GET',
        url: SUBMIT_URL,
        data: {
            indexStart: indexLast  //you'll need you backend to take this index and get the next 3 items from the list starting at this index count, so first time, get first 3, second call you would need to get 3-5, 6-9, etc
        },
        dataType: 'html',
        success: function (return_data, textStatus_ignored, jqXHR_ignored)  {
            indexLast += 3;  //add 3 to the index
            // Now Use the Data here, or save to a variable and use elsewhere.
            // if your sever simply returns the table formated data already you can just call your jQuery.append(return_data) and your done.
        }
    });

});