datatables按钮和搜索框位置

嗨，我使用数据表和使用引导样式。任何人都可以告诉我如何为我的按钮和搜索框实现这种布局？（我使用Adobe Photoshop来产生这种观点）datatables按钮和搜索框位置

我试图改变DOM的JavaScript

var table = $('#dataTables-example').DataTable({ 
    dom: '<"col-sm-12"B><"col-sm-12"f>t', 
    select: true, 
    scrollY: '80vh', 
    scrollX: true, 
    "autoWidth": false, 
    scrollCollapse : true, 
    paging : false, 
    stateSave : true, 
    order : [[ 0, "asc" ]], 
    buttons: [], 
    language: { 
     buttons : {}, 
     select:{ 
      rows:{ 
       _: "", 
       0: "", 
       1: "" 
      } 
     }, 
     "emptyTable": "Tidak terdapat data di tabel", 
     "info": "", 
     "infoEmpty": "", 
     "infoFiltered": "", 
     "search": "<i class='fa fa-search'></i>", 
     "paginate": { 
      "next":  ">", 
      "previous": "<" 
     }, 
     "zeroRecords": "Tidak ditemukan data yang sesuai", 
    } 
});

，但得到的是这样的...我有时间难以改变搜索框HTML结构

我只是不能打入，通过数据表创建的HTML结构..和有很难有时间去试图了解整个数据表jQuery的文件...

如果只有我可以通过阅读this控制HTML结构，那么我相信，HTML代码将是这样的......

<div class="col-sm-12"> 
     <div class="btn-group"> 
      //the button in here 
     </div> 
    </div> 
    <div class="col-sm-12"> 
     <div class="input-group"> 
      <div class="input-group-addon"><i class="fa fa-search"></i></div> 
      <input type="text" class="form-control" placeholder="search term...." /> 
     </div> 
    </div> 
    <div class="col-sm-12"> 
     //table in here 
    </div>

来源

2016-07-27 Laurensius Tony

开始这解释了对type=search应用于输入的输入样式的相当严格的限制。 DataTables中的搜索框就是这样一个输入。

这来自链接的文章。将此CSS添加到您的样式表中：

input[type=search] { 
    -moz-appearance:none; 
    -webkit-appearance:none; 
}

这应该取消用户代理在搜索框上强制的样式。如果没有，你可能会考虑编程改变框的type从search到text：

$('.datatables_filter input').attr('type', 'text');

如果你再打，你会希望把本声明的函数时initComplete选项如果你可以避开它，那么你可以调用DataTable方法（如果“你的表已经完全初始化了”，那么文档没有说明是否所有的标记都被绘制了）。如果没有，你将不得不使用drawCallback选项。

来源

2016-07-27 03:10:10 BobRodes

datatables按钮和搜索框位置

回答

相关问题