0

我在让 jPages ( http://luis-almeida.github.io/jPages/ ) 插件处理通过 ajax 传递的内容时遇到了一些实际问题。

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

当我们有少量空缺时，这很好，如下所示，但是如果我们有 100 个空缺怎么办？

所有职位空缺

为了解决这个问题，我决定使用 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 ) 找到，并且正在进行中。

如果您需要任何进一步的信息或代码，请随时询问。

热兹平

4

1 回答 1

0

到目前为止，我发现的最简单的解决方案是在使用以下代码将过滤后的搜索变量输出到页面之前对其进行解析：

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

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

于 2014-03-05T11:21:20.227 回答