Customization of the overall layout of DataTables

Customization of the overall layout of DataTables

RyanStanfordRyanStanford Posts: 23Questions: 4Answers: 0

Good morning everyone, and happy Friday.

Is there a way to hide elements that we may not want, or to rearrange where elements are. such as, say I don't want the total number in the tables showing 1 of 14,254... or I want the search bar to be relocated to the left of the show number of entries option... or if I just want to set the entries to 50 per page, and then hide the entries option all together?

I've looked over discussions and blogs, and the examples, and it appeared a lot of stylizing was more regarding the rows/cells themselves instead of the DataTables Container.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    The dom option is used for the layout. I believe you will want to use the language to change how the info is displayed.

    Kevin

  • RyanStanfordRyanStanford Posts: 23Questions: 4Answers: 0

    @kthorngren Thanks for the input, the dom option has helped, as well as led me down the path on altering the css to align things properly.

    I'm having a little trouble with the language tag.

    var table = $('#example').DataTable( {
    "data": ParentTable,
    "columns": [
    {
    "className": 'details-control',
    "orderable": false,
    "data": null,
    "defaultContent": ''
    },
    { "data": "RecordID" },
    { "data": "EmpID" },
    { "data": "VendorID" },
    { "data": "Name" },
    { "data": "Company" }
    ],
    "order": [[1, 'asc']],
    "language": {
    "loadingRecords": "Please wait - loading..."
    }
    } );

    I never see the "Please wait - loading..." I've tried having language at the top of my parameters, and now at the bottom as shown... What am I missing?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    The language.loadingRecords states that it works when using ajax to load client side records. You are using data to load the records. If you are using jQuery ajax to load the records then you will to control the loading message. This thread may help:
    https://datatables.net/forums/discussion/46782

    Kevin

  • RyanStanfordRyanStanford Posts: 23Questions: 4Answers: 0

    @kthorngren Absolutely perfect.

    Side question, how do you properly tag the options in posts like that?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited March 2019 Answer ✓

    Hi @RyanStanford ,

    You do something like this: backquote -option data backquote

    Cheers,

    Colin

This discussion has been closed.