在 Jquery 中向 Datatable 添加更多下拉或 html 元素答案

【问题标题】：Adding more drop down or html elements to Datatable in Jquery在 Jquery 中向 Datatable 添加更多下拉或 html 元素
【发布时间】：2016-03-11 17:34:47
【问题描述】：

是否可以在默认后向Datatable添加更多下拉或其他html元素

显示“5”条记录

我想在默认选项和默认提供的搜索栏之间向我的 DataTable 添加更多下拉菜单。

我已经通过 sDom，但我无法理解语法。

提前致谢。

【问题讨论】：

标签： datatable datatables datatables-1.10

【解决方案1】：

您可以这样在长度菜单和过滤框之间插入一个元素<div>：

var table = $('#example').DataTable({
   dom : 'l<"#add">frtip'
})

'lfrtip' 是默认的dom 字符串，因此您基本上只需在现有布局中添加<div id="#add">。建议设置#add 的样式，尤其是将display 类型设置为inline-block，这样它就不会破坏以下元素：

#add {
  display: inline-block;
  padding-left: 30px;
  float: left;
}

现在您可以使用普通的 jQuery 方式将 <select>（或其他）添加到 #add 元素：

//insert a label
$('<label/>').text('my dropdown').appendTo('#add')

//insert the select and some options
$select = $('<select/>').appendTo('#add')
$('<option/>').val('1').text('option #1').appendTo($select);
$('<option/>').val('2').text('option #2').appendTo($select);
$('<option/>').val('3').text('option #3').appendTo($select);

演示 -> http://jsfiddle.net/ahqbf35w/

【讨论】：

非常感谢先生的回复和回答。
如何在div中添加另一个元素？
@SapneshNaik，你可以用同样的方法做；在这里添加了一个额外的<input> 和一个ID -> jsfiddle.net/ahqbf35w/22