2017-09-25 2 views
0

私が持っているものは、jQueryを介して大きなデータのリストを収集しているページです。表示される結果の量を変数に制限し、リストに表示された結果を変更して誤ったページ効果を作成しようとしています。すべてが同じJS関数を介して動作し、1つの変数に依存してすべてが機能するようにします。シンプル。私は、HTMLの中から「ページ」、この関数を呼び出すが、変数を変更する方法を探していますすべてJS関数を実行し、htmlの変数を定義します

function myFunction() { var page = 1; console.log(page); } 

を簡素化するために余分なコードのすべてを削除しました。線に沿って何か:

<a href="" onclick="myFunction(page=2)"> 2 </a> 

は、私はちょうど私が探しています何を見つけることができないようGoogleで探して(まだ午前)されています。私は複数のページを避けようとしています/この要素は同じページ上の大きなプロジェクトに使用されるため、リフレッシュしています。

UPDATE:私はこれが最も簡単なようだ

<input type='button' onclick='myFunction(value)' value='input page number'> 

そう...

function myFunction(page) { console.log(page); } 

のようなJS関数への通過意図値を渡すために管理...と...私が必要とすることをする方法、あなたはどう思いますか? あなたの助けてくれてありがとうbtwみんな。

+0

1つのオプションは、カスタム属性をアンカータグに追加して、javascript関数にアクセスすることです。 – mrogers

答えて

0

確かに、マークアップにdata-url属性を追加し、.linkクラスを選択すると、そのクラスの一部である各要素のdata-url属性を取得できます。

この要素が同じページ上の大きなプロジェクトに使用する を行っているように私には、複数のページ/リフレッシュを避けるためにしようとしています。

あなたはAJAXソリューションも好きです。

$(document).ready(function() 
 
{ 
 
    //Add this on your call.html page 
 
    $(".link").click(function() 
 
    {     
 
     //location of test JSON file 
 
     var root = 'https://jsonplaceholder.typicode.com'; 
 
     
 
     //your custom attribute acting as your 'variable' 
 
     var page = $(this).attr('data-url'); 
 
     console.log("page = " + page); 
 
     
 
     //remove any previous html from the modal 
 
     $(".modal-content").empty(); 
 
     
 
     //send a request to the server to retrieve your pages 
 
     $.ajax(
 
     { 
 
      method: "GET", 
 
      //this should be updated with location of file 
 
      url: root + '/posts/' + page, 
 
      //if server request to get page was successful 
 
      success: function(result) 
 
      {   
 
      console.log(result); 
 
      var res = result;    
 
      var content = "<div class='panel-default'><div class='panel-heading'><h3 class='panel-title'>" + res.title + "</h3></div><i><div class='panel-body'>''" + res.body + "''</i></div><p><u> Master Yoda, (2017)</u></p><p class='page'> Page: " + page + "</p></div>"; 
 
      
 
      $(".modal-content").html(content); 
 
      }, 
 
      //otherwise do this 
 
      error: function(result) 
 
      { 
 
      $(".modal-content").html("<div class='error'><span><b> Failed to retrieve data </b></span><p> try again later </p></div>"); 
 
      } 
 
     }); 
 
    }); 
 
});
.error 
 
{ 
 
    border: 2px dotted red; 
 
    margin: 5px; 
 
} 
 

 
a 
 
{ 
 
    font-size: 20px; 
 
} 
 

 
.page 
 
{ 
 
    text-align: left; 
 
    padding: 0 15px; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<a class="link" data-url="1" data-toggle="modal" data-target="#Modal" href="test.html">Show Page 1</a> 
 
<br /> 
 
<a class="link" data-url="2" data-toggle="modal" data-target="#Modal" href="">Show Page 2</a> 
 

 
<div id="Modal" class="modal fade text-center"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
    </div> 
 
    </div> 
 
</div>

0

これはあなたがMyFunctionの

function myFunction(page) { console.log(page); } 

のパラメータであることをページ変数を移動する必要がありますそして、あなたはちょうどあなたが

を希望どんなページ番号を渡すことができます行うには、
<a href="" onclick="myFunction(2)"> 2 </a> 
+0

これは最も簡単な解決策であり、これは「mrogers」が言っていたと思います。問題は、変数に基づいて他の計算があるので、この方法で定義されたままにする必要があるということです。リストに現在表示されているデータを最新の状態に保つためのリフレッシュ機能もあり、リストを消すようです私はそれを修正することができるかもしれません。私は今試してみるべきことがいくつかありますので、今までの回答に感謝します。 – 100000011

0

私はどのように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. 
を物事をめちゃくちゃにすることなく、リスト内のデータを更新する関数を作成

それはちょうどそれを行う必要があります!少なくともそれは私のために働いているが、私は何かを逃した可能性があります(うまくいけない)。これは誰かが他のところで外挿され使用されていることに関係するかなりの事柄を助けてくれることを願っています:)

助けてくれてありがとう。

関連する問題