bootstrap Datatable自定义表格工具栏

Bootstrap DataTable提供的表格样式是这样的：

但是如果想实现如图的效果：

需要在jquery函数中修改成如下：

 $(document).ready(function() {
  $('#dataTables-example').dataTable( {
        "dom": '<"top"fl><"toolbar">rt<"bottom"ip><"clear">'
    } );
$("div.toolbar").html('<select><option>All</option><option>Archive</option><option>No-Archive</option></select>').addClass("select");
} );

其中fl中的f是搜索框，l是每页显示的条数，r暂时还没发现，t应该是控制格局的，i是表格下面的总数据条数，p是翻页的按钮。想起DataTable中有写到。

如此一来，'<"top"fl><"right"><"toolbar">rt<"bottom"ip><"clear">'的意思是：<top>即表格的上方放置搜索框和每页显示的条数，接着右边放置我们自定义的东西，如例子中的下拉列表。以此类推。具体DataTable提供给我们的这些配置是怎么实现还是需要深究，我还不能完全理解这样的写法，毕竟我还是菜鸟。

<"xxx">的用法应该是说，创建一个class名为xxx的div，若要在DIV中放东西，就是上面写的那样，<"xxx"fl>，要能想象成div跟div的样子，用起来就会舒服多了

记录下来，作为笔记之用！