Hide Search Box but show Create/Edit/Remove buttons (Editor)

welleozean

Hello,

I starting to use the Editor version. In the past (simple Datatable) I used to have

dom: 'Z<"top"i>rt<"bottom"lp>'

to hide the Search Box (I have a customized one). Now, if I add this line, the Search Box disappears, but so do also the 3 buttons Create/Edit/Remove. I have not found any info about this.

Thank you.

tangerine

The buttons are represented in the dom options by the letter "B", as explained in the docs.
https://datatables.net/reference/option/dom

welleozean

Thank you. Probably I am misunderstanding something. I use Bootstrap 4 and the following:

var table = $('#mobile').DataTable( {
    ajax: 'php/table.aZcfHjt9.php',
    dom: 'Z<"top"i>rt<"bottom"lp>',
    colReorder: true,
    columns: [
    {
        "data": "Term2"
    },

    {
        "data": "Term3"
    },
        {
        "data": "note"
    }
    ],
    select: true,
    lengthChange: false
} );

new $.fn.dataTable.Buttons( table, [
    { extend: "create", editor: editor },
    { extend: "edit",   editor: editor },
    { extend: "remove", editor: editor }
] );

table.buttons().container()
    .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );

Adding B to the DOM does not produce any effect (besides that the button Print is displayed)

kthorngren

You can use either the B in the dom option or direct insertion like you have to place the buttons. This is described in this doc.

If you are seeing the print button when using the B dom option then that means you are loading the buttons JS/CSS files. The code above looks like it should work. You didn't post you editor config. Are you assigning your editor to the variable editor, ie, editor = new $.fn.dataTable.Editor( {?

Do you see errors in your browser's console?

You are missing something but the above doesn't show what that is. Can you post a link to a test case showing the issue?

Kevin

welleozean

I have created the files with the Creator and have no changed them at all (besides for the config.php to communicate with the database). So it comes directly from the Creator. Buttons are displayed correctly. until I add the DOM line

dom: 'BZ<"top"i>rt<"bottom"lp>',

the Editor buttons disappear and the Print appears.

I can upload a copy, but again is the very same I just downloaded with no editings.

welleozean

Here is the javascript as from the Creator for the Editor

var editor = new $.fn.dataTable.Editor( {

welleozean

Here is the live example:

http://windsurfinglanzarote.com/editor/mobile

kthorngren

The problem is you don't have the class col-md-6 in the HTML. If you go to the BS4 Editor example and inspect the area where the buttons are you will see this:

You don't have that structure. I think its because you have dom: "B". If you use the dom option with BS4 you should use the styling as shown in the docs. I don't think it is intended to use the B in the dom option and use the direct insertion method of:

table.buttons().container()
    .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );

Use one or the other.

The default dom setting when using BS4 looks to be what is shown in the above linked styling section. Since you are using dom: 'Z<"top"i>rt<"bottom"lp>', you have removed those classes so they aren't in the page when you use the selector of .col-md-6:eq(0).

Long story short you either need to find a different selector to use (you may need to manually place a div where you want the buttons) or change your dom to include the documented styling.

Kevin

welleozean

Hi Kevin,

thank you for your valuable feedback. However, I do not get it. Even the example you showed me (the main HTML page), if opened for inspection does not have the class col-md-6. If I delete the DOM specification from my example, the buttons appear.

So I surely not understanding some basic principle, but I am struggling a lot. Note, this is the only part I am struggling with. Otherwise I find the all Datatable very intuitive.

Provided I want to add a custom

<

div> and append there the buttons, how sould I proceed? The following does not work (my Javascript knowledge is miserable):

I added in the main HTML:

<div class="editingbuttons"></div>

The Javascript is modified as:

table.buttons().container()
    .appendTo( $('.editingbuttons', table.table().container() ) );

This of course does not work. How should I proceed?

Of course, I can obtain the same result fiddling with the CSS. The following for example works (using no DOM):

<style>
.dataTables_filter, .dataTables_info { display: none; }
</style>

But I pretty sure this is not the right way to go.

Thank you

kthorngren

Even the example you showed me (the main HTML page), if opened for inspection does not have the class col-md-6

Datatables adds the div with those classes when it initializes. The dom option is used to add them based on the styling (BS4 in this case) used. If the dom option is not provided then Datatables will use the default shown in the docs which adds the divs with the col-md-6 class. You are over-riding this default with dom: 'Z<"top"i>rt<"bottom"lp>',.

This of course does not work. How should I proceed?

table.buttons().container()
    .appendTo( $('.editingbuttons', table.table().container() ) );

You probably need to remove the table.table().container() portion of the selector, resulting in this code:

table.buttons().container()
    .appendTo( $('.editingbuttons' ) );

Kevin