Question

我正在尝试向我的datatable添加自定义html标头，尤其是我想将搜索和长度位置更改为左侧，并添加自定义html 在右边，我尝试以下代码：

$(document).ready(function() {
     var table = $('#example').DataTable( {
          "dom": 'l<"toolbar">frtip'
    } );

    $("div.toolbar").html('<div class="float-right">'+
                        '<form class="form-inline">' +
                            '<div class= "form-group" > ' +
                                '<div class="input-group">' +
                                    '<input type="text" class="form-control form-control-light" id="dash-daterange">' +
                                    '<div class="input-group-append">' +
                                        '<span class="input-group-text bg-primary border-primary text-white">' +
                                            '<i class="mdi mdi-calendar-range font-13"></i>' +
                                        '</span>' +
                                    '</div >' +
                                '</div >' +
                            '</div >' +
                            '<a class="btn btn-primary ml-2">' +
                                '<i class="mdi mdi-filter-variant"></i>' +
                            '</a>'+
                        '</form>' +
                    '</div>');

} );

我添加了JSFiddle here。

我做错了什么？

更新

预期结果：

Show [10 v] entries             calendar[]  filter[]
Search...

Answer 1

您可以将<table>之前的部分分成两个大小相等的框：

.dt-box {
  float: left;
  width: 50%;
}

dom: '<"dt-box"lf><"#toolbar.dt-box">rtip'

头痛的是样式过多的元素，您必须更改一些默认设置：

.dataTables_wrapper .dataTables_filter {
  clear: both;
  float: left !important;
  margin-top: 5px;
}
.dataTables_wrapper .dataTables_length {
  text-align: left !important;
  float: left;
}

现在您可以通过以下方式添加自己的表格

$('#toolbar').html('....')

叉状提琴-> https://jsfiddle.net/xu4fdpk9/

注意：如果上述内容应具有响应性或例如适合非常狭窄的表，则需要其他样式。

我确实无法复制您所描述的内容（否则我可能会误解），但是您可以将.dt-box包裹在flex容器中：

.dt-flex {
  display: flex;
}

dom: '<"dt-flex"<"dt-box"lf><"#toolbar.dt-box">>rtip'

不知道是否有任何区别，但是左右dt-box可以保证高度相同。

Answer 2

我不确定我是否理解。您希望“搜索”字段和“显示”条目位于左侧，而一些自定义html（我假设是该无名框）位于右侧？

我建议为此添加一些样式，例如（更新）：

(<style type='text/css'>)

#example_wrapper {
  padding-top: 50px;
}

#example_filter {
  position: absolute;
  left: 0px;
  top: 30px;
}

#example_length 
{
  position: absolute;
  left: 0px;
  top: 0px;
}

.toolbar {
  position: absolute;
  top: 0px;
  right: 0px;
}

(</style>)

无法将自定义HTML添加到数据表

2 个答案: