Datatable jquery插件:填充select来过滤通过ajax获得的数据

datatable jquery plugin: populate select to filter data acquired through ajax

本文关键字：ajax 数据 过滤 插件 jquery 填充 select Datatable      更新时间：2023-09-26

我正在使用强大的jQuery插件dataTable，我需要:1. 从ajax源获取数据2. 将select添加到过滤器输出

这是HTML代码:

<table id='probecardlist' class='display' cellspacing='0' width='100%'>
<thead>
    <tr>
        <th>Selection</th>
        <th>Id</th>
        <th>Production Area</th>
        <th>Format</th>
        <th>Orientation</th>
        <th>Parallelism</th>
    </tr>
</thead><thead>
    <tr>
        <th></th>
        <th></th>
        <th><select id='filter.productionarea'></select></th>
        <th><select id='filter.format'></select></th>
        <th><select id='filter.orientation'></select></th>
        <th></th>
    </tr>
</thead>
</table>

就是JS:

$( document ).ready(function() {
var table = $( '#probecardlist' ).dataTable({
    'ajax' : 'http://whaelse.url/query.php',
    'paging' : false,
    'searching' : false,
    'ordering' : true,
    'columns' : [
        { 'data' : 'selection' },
        { 'data' : 'id' },
        { 'data' : 'productionarea' },
        { 'data' : 'format' },
        { 'data' : 'orientation' },
        { 'data' : 'dicecount' }
    ],
    'fnInitComplete' : function( oSettings , json ) {
        console.log( this.column( 'format:name' ).data() );
             })
})
});

当我尝试列出(在控制台)列"format"的值列表时，我得到这样的错误:

object# HTMLTableElement没有'column'方法

嗯……怎么了?

'fnInitComplete'实现了[this.api()]方法来获取对象的属性

'fnInitComplete' : function ( oSettings , json ) {
     var api = this.api();
     api.column ( 'format:name' ).data().unique().sort().each( function ( v ) {
        console.log (v);
     });
  }
相关文章：