functionality similar to twitter using codeigniter

Question

Hi Guys,

I will first tell you my scenario, in my problem there are two users of the system one who is using the system to register people to it, and another person who use the system to check the registered users in the system.

this is a hospital scenario, people register at the registration desk and in the registration order doctor checks the patients.

so what i want to achieve is a UI for the doctor which displays the patient details system got registered, to keep the UI simple i want to load 10 patient details at a given time but if patients are not in that list of ten i need to give a button to load more patient details, but i want to give the function to the doctor to check the older, missed patients also!

i checked some pagination articles but they doesn't match my requirement, any suggestion to read guys? blog post? or help with the coding ?

regards, Rangana

Answer 1

You could do it with some JQuery. Place a hyperlink below the patient list. Handle the link click event by fetching the next page of patients through AJAX and appending it to the list. Keep a global Javascript variable to track the current page number.

Below is an example. For simplicity, the first page of patients is also loaded through AJAX. list.php is your script that handles the AJAX request and writes the requested page of patients as a sequence of HTML list items.

The JQuery :

var currentPage = 0;

$(document).ready(function() {
    // Load the first page into the list
    loadNextPage();

    // When the link is clicked load the next page
    $('#add-more-patients-link').click(function() {
        loadNextPage();
        return false;
    });
});

function loadNextPage() {
    // Increment the page counter
    currentPage++;

    // Fetch the next page through AJAX and append to the list
    $.get('list.php', {page:currentPage}, function(data) {
        $('#patients').append(data);
    });
}

The HTML :

<ul id="patients">
</ul>
<a id="add-more-patients-link" href="">Load more</a>

Caveat : If the backend list of patients is updated between page loads, the client-side list will become out of sync. This will result in duplicate entries for some patients in the list. If this is a problem, keep track of the last loaded patient ID on the client and pass this up in the AJAX request. On the server side fetch the page previous to that patient ID.