Question

我在使用jPages（http://luis-almeida.github.io/jPages/）插件处理通过ajax传送的内容时遇到了一些实际问题。

我正在构建的页面基本上允许用户查看我们客户公司可用的当前空缺列表。加载页面后，将使用表单中的默认值触发ajax请求。然后，该请求将所有空缺返回到页面（见下文）。

如果我们有如下所示的少量职位空缺，这很好，但如果我们有100个职位空缺怎么办？

All Vacancies

为了解决这个问题，我决定使用jPages对页面加载时发送的ajax请求的结果进行分页。首先，此页面的基本html的默认结构（加载内容的位置）如下：

<div class="icams-specific" id="icams-specific">
  <h1>Vacancies</h1>
  <h2><span class="numberFound">&nbsp;</span> found - <a class="inline-job-alerts" href="/job-alerts.html">set up alerts</a></h2>
  <hr />
  <div id="searchContentWindow"></div>
</div>

如您所见，这是一个非常简单的结构。当第一次加载我的ajax时，这个html变为：

<div class="icams-specific" id="icams-specific">
  <h1>Vacancies</h1>
  <h2><span class="numberFound">&nbsp;</span> found - <a class="inline-job-alerts" href="/job-alerts.html">set up alerts</a></h2>
  <hr />
  <div id="searchContentWindow">
    <div class="jobpost Job Postings">
      <div class="template_image"></div>
      <div class="jobpost_body">
        <h2><a href="/vacancy/it-consultant-176602.html">IT Consultant</a></h2>
        <p>To carry out a range of assigned clerical/support duties in accordance with predetermined procedures and service standards under appropriate guidance and direction.</p>
        <p>
          <span class="jobclass even department">
            <span class="jobclass_type">Department:</span>
            <span class="jobvalue">Engineering</span>&nbsp;
          </span>
          <span class="jobclass uneven location">
            <span class="jobclass_type">Location:</span>
            <span class="jobvalue">Farnborough</span>&nbsp;
          </span>
          <span class="jobclass even refno">
            <span class="jobclass_type">Ref No:</span>&nbsp;2&nbsp;
          </span>
        </p>
     </div> <!-- end of jobpost_body -->
     <div class="jobpost_nav">
        <p><a title="View this vacancy or apply &gt; (IT Consultant)" href="#" class="apply_direct">View this vacancy or apply &gt;</a>
           <a title="Send a friend (IT Consultant)" class="send_a_friend" href="#">Send a friend</a>
        </p>
     </div>
   </div>
   <div class="divider">
     <hr>
   </div>
</div>

对于每个空缺，一遍又一遍地重复该结构。我用来进行此调用的函数如下：

function fireAjaxRequest(formUrl,contentArea,form){
  $.ajax({
    type: 'POST',
    url: formUrl,
    data: form.serialize(),
    success: function(response){
      var errorMessageFound = $(response).find('p.error');
      var numberOfRoles = 0;
      if(errorMessageFound.length > 0){
        contentArea.html(errorMessageFound);
        $('.numberFound').html(numberOfRoles + ' job');
      }else{
        var filteredSearch = $(response).find('div.searchresults:last');        
        var numberOfRolesCalc = $(filteredSearch).find('.jobpost').each(function(){
          numberOfRoles++;
        });
        contentArea.html(filteredSearch);
        if(numberOfRoles > 1){
          var jobs = '&nbsp;jobs';
        }else{
          var jobs = '&nbsp;job';
        }
        $('.numberFound').html(numberOfRoles + jobs);
        form.find('#p_text').val('');
        trimSpacing();
      }             
     }
    });
   }

作为尝试将jPages实现到此设置中的一部分，我在此代码的末尾添加了以下内容：

...trimSpacing();
$('.searchresults').attr('id', 'searchResults');
$('div.holder').jPages({
  containerID : 'searchResults'
  ,perPage : 2
});...

这在分页开始时会起作用，但奇怪的是，它似乎将以下html分组到不同的页面中：

<div class="jobpost Job Postings" style="display: block; opacity: 1;">...</div>
<div class="divider" style="display: block; opacity: 1;">...</div>

内容和分隔符。我相信它正在这样做，因为它将perPage应用于指定容器中的每个div，其中真正应该只应用于具有.jobpost类的div。

我查看了此插件的文档，但找不到指定哪些元素应该专门分页的方法。理想情况下，此脚本应显示为每页2个作业，但由于分隔符div，它实际上显示为1。

是否有人可以提供任何建议或解决方法以确保每页显示正确数量的作业？是否能够指定一个不在文档中的中断选择器？

非常感谢任何帮助。

可以在此处找到相关页面（http://equiniti.hireserve-projects.com/vacancies.html），这是一项正在进行的工作。

如果您需要任何进一步的信息或代码，请不要犹豫。

Jezzipin

Answer 1

到目前为止，我发现的最简单的解决方案是在使用以下代码输出到页面之前解析filteredSearch变量：

$(filteredSearch).find('.divider').each(function(){
   $(this).remove();
});

但是，如果有一种替代方法在这种情况下更好，避免从ajax响应中删除内容，我愿意接受建议。

使用带有通过ajax提供的内容的jPages

1 个答案: