实时html/js代码https://jsfiddle.net/larrycai/9e8rg76f/2/(数据为示例,并非真实的)
我有很多3 pps的扫描集装箱图像,见列3pp lists
,通常它可以有100+ 3 pps。
为了拥有更好的用户体验,我希望
- 默认情况下,在单元格内显示20个组件(
...
) - 如果在搜索框中搜索了某个内容,则可以在单元格中标出那些过滤的3 pps(datatables.mark.js
- 如果标记太多,则仍显示最多20个组件
- 如果有更多/更少的按钮也会很好,所以如果用户想扩展行,所有的3 pps都可以扩展。
我试着使用render()
函数,如果我过滤的话,那么Datatable搜索不能覆盖所有原始的3 pp列表
var table = $('#dataTable').DataTable({
"data": jsonData,
"columns": [{
"data": "name"
},
{
"data": "image",
"render": function(data, type, row, meta) {
return "" + data + "";
}
},
{
"data": "3pp",
"render": function(data, type, row, meta) {
/*
1. if nothing in search (initial), show first SHOW_NUM keywords + ...
2. if value in search, show matched 3pps, if it is bigger than 20, show first 20 keywords + ...
*/
return data.slice(0, SHOW_NUM) + " ..."
}
1条答案
按热度按时间5t7ly7z51#
我一直不明白
render
为什么要替换数据。相反,在呈现行后使用回调函数,使用data属性修改呈现的单元格。我使用了rowCallback和jQuery data cell click callback,它将引用的行和数据传递给一个小的prettify3pp
函数,该函数引用renders
,取消引用包含更新内容的单元格。再加上几个引导徽章,瞧。
第一个