Customizing design with jQuery DataTables

Question

I am using jQuery DataTables to sort through table data and I want to customize the layout. Instead of the framework injecting the HTML elements, I just want to specify using IDs where they should be. This is my initialization:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#results-table').dataTable({
            "sDom": 'fi'
        });
    });
</script>

That puts in both the search bar and the information text. I have already created an input that I want to use for the filter as well as a div for the information displayed. I just need the framework to insert the HTML into these elements instead of creating new ones.

Those elements do occur outside the table. Not sure what you're asking. — Derek Henderson
– Derek Henderson, Commented May 1, 2013 at 20:23
what do you mean "outside of the table"? they are outside of the <table> html — Jay Rizzi
– Jay Rizzi, Commented May 1, 2013 at 20:24
I apologize for being unclear there. What I mean is that when Datatables is initialized it creates three divs (wrapper, filter and info) around the <table>. I have already created an input that I want to use for the filter as well as a div for the information displayed. I just need the framework to insert the HTML into these elements instead of creating new ones. — Arun
– Arun, Commented May 1, 2013 at 20:41

Jay Rizzi · Accepted Answer · 2013-05-02 13:56:03Z

Ok so this is how you add your own elements to the sDom (note that in my example, i am using jquery ui for styling, so i have to add ui elements)

 var oTable = $('#example').dataTable( {
    "bJQueryUI": true,
    "bProcessing": true,
    "bServerSide": true,
    "sDom": '<"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-     helper-clearfix"l f <"dataTables_mylist"><"dataTables_dater"> r>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',

datatables_mylist and dataTables_dater are both element ids that I inject content into after load. You would need to use standard jQuery / DOM methods (i.e. appendChild) after DataTables has been initialised, it cannot grab an existing element and move it.

In my application, Mylist is a button that onclick applies a specific filter by userid so that i dont have to display a user column, and a user doesnt have to type in their userid in the search box

Collectives™ on Stack Overflow

Customizing design with jQuery DataTables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related