Cannot add custom html to datatable

Question

I'm trying to add a custom html header to my datatable, in particular I want change the search and lenght position to the left, and add the custom html to the right, I try this code:

$(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>');

} );

I add a JSFiddle here.

What I did wrong?

UPDATE

Expected result:

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

davidkonrad · Accepted Answer · 2018-09-09 20:19:15Z

1

You can divide the section before <table> in two equal sized boxes :

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

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

The headache is the heavily styled elements, you must change a few defaults:

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

Now you can add your own form by

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

forked fiddle -> https://jsfiddle.net/xu4fdpk9/

NB: Additional styling is needed if the above should be responsive or for example fit into a very narrow table.

I really cannot reproduce what you describe (or I may misunderstand) but you could wrap the .dt-box'es into a flex container:

.dt-flex {
  display: flex;
}

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

Dont know if that make any difference, but both left and right dt-box is by that guaranteed to have same height.

edited Sep 9, 2018 at 20:19

answered Sep 9, 2018 at 19:29

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dillinger Over a year ago

Exactly what I'm looking for, just a thing: when I reduce the window dimension the button of the form overlay the datatable, how can I prevent this? In the fiddle the button is not displayed because the icon pack is missing, you can try replacing the a tag with a button

Jan Andersen · Accepted Answer · 2018-09-09 20:21:07Z

0

I am not sure I understood. You want the Search field and Show entries to be in the left side and some custom html, which I assume is that nameless box, in the right side?

I would suggest adding a bit of styling for that, something like (updated):

(<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>)

edited Sep 9, 2018 at 20:21

answered Sep 9, 2018 at 17:46

Jan Andersen

7731 gold badge6 silver badges13 bronze badges

2 Comments

Dillinger Over a year ago

Thanks for the reply Jan, I mean: I'm trying to align the search bar and the length vertically to the left, and to the right should be displayed my form

Jan Andersen Over a year ago

Well, the layout is using relatively positioning which means you can fix these items at absolute positions. Like this?

Collectives™ on Stack Overflow

Cannot add custom html to datatable

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related