Question

我所拥有的是一个通过jQuery收集大量数据的页面。我试图限制显示给变量的结果数量，并更改列表中显示的结果以创建错误页面效果。一切都通过相同的JS函数工作，并依赖于1变量使一切工作。简单。我删除了所有额外的代码以简化一切

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

我正在寻找一种调用此函数的方法，但是在html中更改变量'page'。有点像：

<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家伙。

Answer 1

当然，您可以将data-url属性添加到标记中，然后在.link类上选择以获取该类的每个元素的data-url属性。

我试图避免多个页面/刷新，因为这个元素正在进行用于同一页面上的大型项目。

听起来你也想要一个AJAX解决方案。

＆＃13;

$(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>");
          }
        });
    });
});

＆＃13;

.error
{
  border: 2px dotted red;
  margin: 5px;
}

a
{
  font-size: 20px;
}

.page
{
  text-align: left;
  padding: 0 15px;
}

＆＃13;

<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>

＆＃13;

Answer 2

为此，您需要将页面变量移动为myFunction的参数

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

然后你可以传入你想要的任何页码

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

Answer 3

我似乎已经想出如何做到这一点。我想避免在项目中使用大量的库，只是想保持简单，使用上面的答案作为指导（以及更多的挖掘），基本上我的最终目标是使用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

然后定义并传递新的列表数据＆＃34;到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);

此时如果将pageNum的值设置为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.

这应该就是这样做的！至少它为我工作但我可能错过了一些东西（希望不会大声笑）。希望这有助于某些人参与其中的一些事情可以推断并在其他地方使用：）

感谢大家的帮助。

执行JS函数并从html

3 个答案: