当尝试查询已作为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>