SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<script src="http://d-scribe.de/webtools/jquery-pagination/demo/members.js"></script>
<script src="http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/jquery.pagination.js"></script>
<div id="Pagination" class="pagination"></div>
<br style="clear:both;" /> 
<h3>List of former members of the United States House of Representatives (A)</h3> 
<dl id="Searchresult"> 
    <dt>Search Results will be inserted here ...</dt> 
</dl>

CSS

.pagination {
            font-size: 80%;
        }
        
.pagination a {
    text-decoration: none;
    border: solid 1px #AAE;
    color: #15B;
}

.pagination a, .pagination span {
    display: block;
    float: left;
    padding: 0.3em 0.5em;
    margin-right: 5px;
    margin-bottom: 5px;
}

.pagination .current {
    background: #26B;
    color: #fff;
    border: solid 1px #AAE;
}

.pagination .current.prev, .pagination .current.next{
    color:#999;
    border-color:#999;
    background:#fff;
}

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #fff;
    margin: 20px;
    padding: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    margin-bottom:10px;
    font-size:1.5em;
}

h3 {
    margin-top:10px;
    font-size:1em;
}

#Searchresult {
    margin-top:15px;
    margin-bottom:15px;
    border:solid 1px #eef;
    padding:5px;
    background:#eef;
    width:40%;
}

#Searchresult dt {
    font-weight:bold;
}

#Searchresult dd {
    margin-left:25px;
}

#footer {
    margin-top:20px;
    font-size:60%;
    color:#15B;
}

label {
    float:left;
    width:250px;
    display:block;
}

form p {
    clear:both;
}

JavaScript

function pageselectCallback(page_index, jq){
    var max_elem = Math.min((page_index+1) * 5, members.length);
    var newcontent = '';
    for(var i=page_index*5;i<max_elem;i++)
    {
        newcontent += '<dt>' + members[i][0] + '</dt>';
        newcontent += '<dd class="state">' + members[i][2] + '</dd>';
        newcontent += '<dd class="party">' + members[i][3] + '</dd>';
    }
    $('#Searchresult').html(newcontent);
    return false;
}

$("#Pagination").pagination(members.length, { 
    callback: pageselectCallback,
    items_per_page: 5, 
    num_display_entries: 10,
    num_edge_entries: 2
});

$("#Pagination")[0].selectPage(9);