datatable中,添加一个下拉搜索框,刷选数据

阅读次数: 11,542

  • A+
所属分类:PHP 工具 建站

首先,看下做好的效果。上图》》》》》》》
datatable中,添加一个下拉搜索框,刷选数据

实现步骤如下:
1.写一个隐藏域,存放下拉框里面的数据,其中,select标签加一个class,“cls_id”,第二步会用到 如图
datatable中,添加一个下拉搜索框,刷选数据

2.将下列代码放入initComplete函数,这个函数会在表格加载完成后执行,且只执行一次,被注释部分会取每条数据对应列的值,哪一列由i控制,如图

datatable中,添加一个下拉搜索框,刷选数据

var api = this.api();
api.columns().indexes().flatten().each( function ( i ) {
if(i != 3)return;
var column = api.column( i );
var select = $('
资讯类别
')
.appendTo( $("#mytool") )
.on( 'change', function () {
column
.search($(this).val())
.draw();
} );
// column.data().unique().sort().each( function ( d, j ) {
// select.append( ''+d+'' )
// } );
select.append($('.cls_id').html());
} );

3.后台部分,取到传过来的分类id,就可以根据分类id进行刷选数据,如图
datatable中,添加一个下拉搜索框,刷选数据
代码如下:

如果步骤2里面的注释打开,使用那种形式的下拉,则可以使用下面这段代码

/* 每一列对应关键字的搜索 start */
foreach ($search as $key => $val) {
if(!empty($val['value']))
$where[$column[$key]] = array('eq',$val['value']);
}
/* 每一列对应关键字的搜索 end */

来自时刻需

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: