私はどのようにdこれ私はこのプロジェクトで多くの図書館を使うのをやめたいと思っていましたが、上記の回答を参考にして(そしてもう少し掘り下げて)物事を単純にしたかったので、基本的にはjQueryを使って長いデータを取得し、このデータを複数のページリストにフォーマットします(フォーマット用にテーブルを使用しました)。それが名前のリストだとしましょう。 JSONとして出力する結果:
[{"first_name":"Bob"},{"last_name":"Jones"}] // (key, value)
しかし、私はHTMLの表に介してこれを通過したとき、それは単に1つのリストに結果の1000を表示し、リストをフォーマットされたが痛みました。これが私の解決策だった:
<script>
var pageNum = ""; // define Page Number variable for later.
var resLimit = 35; // variable to specify the number of results per page
function updateList() {
$.getJSON(" Location of JSON results ", function(data) {
var pageCount = Math.round(data.length/resLimit); // calculate number of pages
var auto_id = ((pageNum-1)*resLimit) // use variables to give each result an id
var newListData = ""; // define this for use later
その後、HTML表に「新しいリストデータ」を定義し、合格:
var newListData = "";
$.each(data.slice(auto_id, (pageNum*resLimit)), function(key, value) {
auto_id++;
newListData += '<tr>';
newListData += '<td class="id">' + audo_id + '</td>';
newListData += '<td class="id">' + value.first_name + '</td>';
newListData += '<td class="id">' + value.last_name + '</td>';
newListData += '</tr>';
});
$('# ID of table, data will replace existing rows ').html(newListData);
この時点であなたは1にPAGENUMの値を設定する場合は、最初の35が表示されるはずです結果はリストに表示され、すべて自動的にID番号が増えます。 2に変更してページをリフレッシュすると、次の35ページが表示され、最初のページのID番号が続きます。
次は私がページごとにボタンを作成するために必要な:
$('# ID of table, data will replace existing rows ').html(newListData);
function createButtons() {
var buttonArray = "";
for(i=0, x=pageCount; i<x; i++) {
buttonArray += '<input type="button" onclick="changePage('
+ (i + 1) + ')" value="' + (i + 1) + '">';
}
$('# ID of Span tags for button container ').html(buttonArray); }
createButtons();
}); }
</script>
その後changePage()と自動的に
<script>
var pageNum = "";
function changePage(page) {
if (pageNum < 1) { pageNum = 1; } // set pageNum when the page loads
if (page > 0) { pageNum = page; } // overwrite pageNum when 'page' variable is defined
updateList(); }
changePage(); // initialise to prevent delayed display on page load
// refresh function:
function refreshData() {
changePage(0); // define 'page' as 0 so that pageNum is not overwritten
window.setTimeout(refreshData, 5000); } // loop this function every 5 seconds to
refreshData(); //-- keep this list populated with current data.
を物事をめちゃくちゃにすることなく、リスト内のデータを更新する関数を作成
それはちょうどそれを行う必要があります!少なくともそれは私のために働いているが、私は何かを逃した可能性があります(うまくいけない)。これは誰かが他のところで外挿され使用されていることに関係するかなりの事柄を助けてくれることを願っています:)
助けてくれてありがとう。
1つのオプションは、カスタム属性をアンカータグに追加して、javascript関数にアクセスすることです。 – mrogers