2016-05-09 1 views
-1

初心者の開発者は、ヘルプを投稿することを決定する前に、右の構文フレーズを理解して、私は正しいソリューションを見つけることができないと思います。基本のexplainationでjson配列を繰り返し、分割して一度に5つのコレクションに表示する(Laravel、Ajax、Carbon)

:イム今から次の60日の日付を表示するためにlaravelとカーボンを使用して、カーボンは、日付を返すだけで罰金とlaravel JSON形式でこのような何かレスポンスを返します:

0: "Tuesday 10th May 2016 " 
    1: "Wednesday 11th May 2016" 
    2: "Thursday 12th May 2016" 

と同様に....私のHTMLには5つの結果を含むdivがありますが、json配列からスプライスを使用してloadMore結果にjQuery onclick関数のようなものを使用できるようにする必要があります。

Laravelはページングのオプションを持っていますが、配列やiveではうまくいきませんでした。オンラインで見つけて、60日の配列を5つの塊に分割する方法を試してみました。つまり、onLoad関数、新しい5つの結果で払い出されます。ここ

私の現在のonLoad関数です:

$.ajax({ 
    crossOrigin: true, 
    url: '/dates', 
    success: function(data) { 
     $(".newdates").html('').append(data); 
    } 
}); 

と、IVEは、以下を試してみましたが、ここでの唯一の問題は、それは私がページネーション方法やどのように類似のいくつかの種類を必要とするのと同じ3つのスプライスされた結果をロードされていますjquery DataTablesが動作します。

$.ajax({ 
    crossOrigin: true, 
    url: '/dates', 
    success: function(data) { 
     $.each(data.slice(0,3), function(i, item) { 
      console.log(item); 
     }); 
    } 
}); 

私は結果が期待されました! HTMLビューで

Day 1 
Day 2 
Day 3 
Day 4 
Day 5 

(複数の負荷)<は - にOnclick現在5を隠し、次の5つの利用可能な日付を示します。

First 5 days are now hidden from the view 
Day 6 
Day 7 
Day 8 
Day 9 
Day 10 

と同じ負荷より機能は私が最後にそこに着くだろうイムは必ず、あなたの時間をありがとうはそのくらいapprecaited、回避策を見つけることができます

希望agai利用できるようになります。

答えて

1

クライアント側でのみページを作成する場合は、そのデータを変数に保存して、再度データをフェッチする必要がなくなります。さらに、ページ付けする関数を作成し、必要に応じて常に呼び出すことができます。あなたはすでにページネーションを扱っているプラ​​グインを検索する必要があります(残念ながら、私はクライアントサイドページネーションだけを使っていないので、最新のプラグインは知らない)。 TypeError例外:

var myData = {}; 
 
var pageNumber = 1; 
 
var ITENS_PER_PAGE = 3; 
 

 
$.ajax({ 
 
    crossOrigin: true, 
 
    url: '/dates', 
 
    success: function(data) { 
 
     myData = data; 
 
     console.log(paginate(myData, pageNumber, ITENS_PER_PAGE)); 
 
    } 
 
}); 
 

 
function paginate(data, pageNumber, itensPerPage) { 
 
    return data.slice((pageNumber - 1) * itensPerPage, itensPerPage); 
 
} 
 

 
function loadMore() { 
 
    pageNumber++; 
 
    console.log(paginate(myData, pageNumber, ITENS_PER_PAGE)); 
 
}

+0

にconsole.logはエラーをスピンdata.sliceは、関数ではなく、その配列[]は空です。私は、loadMore関数にホールドコードスニペットを置く必要がありました。それはonclickメソッドを使って呼び出されたものです。 – Birdy

関連する問題