How to display length menu AND Buttons when using Editor?

How to display length menu AND Buttons when using Editor?

TRuhlandTRuhland Posts: 5Questions: 1Answers: 0

Hi,

I'm using the current versions of DataTables and Editor, but I'm not able to define a table with the following properties:

Left top: LengthMenu AND Editor-Buttons
Right top: Search
The table goes here
Left bottom: Information
Right bottom: Paging

Can someone give me a hint? Thanks in advance!

Thilo

Answers

  • allanallan Posts: 61,805Questions: 1Answers: 10,119 Site admin

    Hi Thilo,

    You just need to include the l option in the dom parameter. Most of my examples drop it to make room for the buttons, but it can be inserted back in if you want it.

    Allan

  • TRuhlandTRuhland Posts: 5Questions: 1Answers: 0

    Hi Allan,

    thank you for your help! Now I can see the length menu, BUT it looks like this:

    LengthMenu---------------------------------------------------------
    Buttons---------------------------------------------------------------
    ----------------------------------------------------------------Search

    It takes three lines!

    I wanted to have this one:

    LengthMenu--Buttons-------------------------------------Search

    BTW: I use bootstrap and I think that this is the reason. If I add the l option wihtin your bootstrap example I also see three lines.

    Can you help me?

    Regards,
    Thilo

  • allanallan Posts: 61,805Questions: 1Answers: 10,119 Site admin

    Hi Thilo,

    It sounds like you need to add / modify the CSS to suit your needs. Can you link to the page so I can take a look?

    Also, if you are using Bootstrap, you need to be aware that it has a different default value for dom - see the documentation.

    Allan

  • TRuhlandTRuhland Posts: 5Questions: 1Answers: 0

    Hi Allan,

    thank you for your reply. Since hours I play arround with dom which has a little bit of traditional chinese ;-) but the best combination (in combination with bootstrap) is:

    "dom": "<'row'<'col-md-6'l><'col-md-6'f>><'row'<'col-md-6'B><'col-md-6'p>><'row'<'col-md-12't>><'row'<'col-md-12'i>>"

    During this I learned: length menu, information and buttons want to be on the left side, filter and pagination want to be on the right side, ore the page layout looks strange. This is because of the underlying css definition.

    This is ok so far as long as you do not resize the browser window (mobile first, responsive etc.). The good: length menu, information, filter and pagination will be centered. The bad: The buttons stay on the left side and it seems that they use more space than they need.

    Unfortunately I can't give you a link because I'm working on a local IIS server with a local SQL database. Normally I would send you a few screen shots where you can see my problem but this forum does not give me the possibility to send pictures ...

    Thilo

  • allanallan Posts: 61,805Questions: 1Answers: 10,119 Site admin

    Hi Thilo,

    I've just committed a change that will have the Bootstrap based buttons correctly aligned on small screens.

    This is in the nightly versions now.

    Regards,
    Allan

This discussion has been closed.