使用Dynatable查询列表失败

时间:2014-05-15 19:54:33

标签: dynatable

当尝试查询已作为dynatable处理的列表时,除了javascript控制台日志错误声明并且数组为null之外没有任何其他事情发生。

这里非常基本的例子:http://jsfiddle.net/7ndcT/

Javascript代码:

// Function that renders the list items from our records
function ulWriter2(rowIndex, record, columns, cellWriter) {
  var cssClass = "span4", li;
  if (rowIndex % 3 === 0) { cssClass += ' first'; }
  li = '<li class="' + cssClass + '"><h1>' + record.make + '</h1><h2>' + record.model + '</h2><h3>' + record.year + '</h3><h4>'+ record.price +'</h4></li>';
  return li;
}

// Function that creates our records from the DOM when the page is loaded
function ulReader2(index, li, record) {
  var $li = $(li);
  record.make = $li.find('h1').text();
  record.model = $li.find('h2').text();
  record.year = $li.find('h3').text();
  record.price = $li.find('h4').text();
}

$('#search-function-example-list').dynatable({
  table: {
    bodyRowSelector: 'li'
  },
  inputs: {
      queries: $('#search-year')
  },
  dataset: {
    perPageDefault: 2,
    perPageOptions: [2, 4, 6]
  },
  writers: {
    _rowWriter: ulWriter2
  },
  readers: {
    _rowReader: ulReader2
  },
  params: {
    records: 'cars'
  }
});

HTML:

<div id="search-function-example-price-filter" style="float: left; margin-bottom: 1em;">

 Year
  <select id="search-year" name="year">
  <option></option>
  <option>2001</option>
  <option>2003</option>
  <option>2008</option>
  <option>2013</option>
</select>

</div>

<ul id="search-function-example-list">
  <li class="span4">
    <h1>Volkswagon</h1>
    <h2>Jetta</h2>
    <h3>2008</h3>
    <h4>11,000</h4>
  </li>
  <li class="span4">
    <h1>Ford</h1>
    <h2>F150</h2>
    <h3>2006</h3>
    <h4>15,000</h4>
  </li>
  <li class="span4">
    <h1>Ford</h1>
    <h2>Mustang</h2>
    <h3>2001</h3>
    <h4>33,000</h4>
  </li>
  <li class="span4">
    <h1>Volkswagon</h1>
    <h2>Passat</h2>
    <h3>2013</h3>
    <h4>11,000</h4>
  </li>
  <li class="span4">
    <h1>Jeep</h1>
    <h2>Wrangler</h2>
    <h3>2003</h3>
    <h4>10,000</h4>
  </li>
</ul>

0 个答案:

没有答案