2017-09-25 64 views
0

我所擁有的是通過jQuery收集大量數據的頁面。我試圖限制向變量顯示的結果數量,並更改列表中顯示的結果以創建錯誤頁面效果。一切工作都通過相同的JS函數,並依靠1個變量來使所有的工作。簡單。我已經刪除了所有的額外代碼,以簡化一切執行JS函數並從html中定義變量

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

我正在尋找一種方式來對這個函數調用,但是變量「頁」從HTML內改變。沿線的東西:

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

我一直在尋找谷歌(和仍然)我似乎無法找到我在找什麼。我試圖避免多個頁面/刷新,因爲此元素將用於同一頁面上的較大項目。

更新:我設法通過像這樣一個JS函數傳遞預期值...

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

......還有......

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

這似乎是最簡單的做我需要的方式,你覺得怎麼樣? 感謝您的幫助btw傢伙。

+0

一個選擇是將所需的變量值自定義屬性添加到您的錨標記,並在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表這只是顯示結果的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,你應該看到的第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. 
功能

而這應該只是做它!至少它在爲我工作,但我可能錯過了一些東西(希望不是大聲笑)。希望這可以幫助別人涉及這方面的一些事情,可以外推和其他地方使用:)

感謝大家的幫助。