CODEWITHSUNDEEP
jquerydatatables
hkguile
hkguile

Reputation: 4369

what is the meaning and usage of jquery datatable sDom?

i have a script of jquery as the following but i don't know the meaning of sDom and the usage, also the syntax is strange for me.

 <script type="text/javascript">
        var oTable;
        $(document).ready(function () {
            oTable = $('#table').dataTable({
                "sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
                "sPaginationType": "bootstrap",

                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "{{ URL::to('admin/newscategory/data/') }}",
                "fnDrawCallback": function (oSettings) {
                    $(".iframe").colorbox({
                        iframe: true,
                        width: "80%",
                        height: "80%",
                        onClosed: function () {
                            window.location.reload();
                        }
                    });
                }
            });
            var startPosition;
            var endPosition;
            $("#table tbody").sortable({
                cursor: "move",
                start: function (event, ui) {
                    startPosition = ui.item.prevAll().length + 1;
                },
                update: function (event, ui) {
                    endPosition = ui.item.prevAll().length + 1;
                    var navigationList = "";
                    $('#table #row').each(function (i) {
                        navigationList = navigationList + ',' + $(this).val();
                    });
                    $.getJSON("{{ URL::to('admin/newscategory/reorder') }}", {
                        list: navigationList
                    }, function (data) {
                    });
                }
            });
        });
    </script>

Is anyone can explain what is the meaning of "sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",

Upvotes: 6

Views: 3362

Answers (2)

ne1410s
ne1410s

Reputation: 7092

There is some documentation here: http://legacy.datatables.net/usage/options#sDom

In summary the letters mean the following:

'l' - Length changing
'f' - Filtering input
't' - The table!
'i' - Information
'p' - Pagination
'r' - pRocessing

The angle brackets etc are as follows:

'<' and '>' - div elements
'<"class" and '>' - div with a class
'<"#id" and '>' - div with an ID

So where you have used <'row' ... > for example, this draws a div with a class of row, containing the contents of ...

Upvotes: 5

kurt
kurt

Reputation: 1156

It is a legacy feature. Quoted directly from the documentation...

"This initialisation variable allows you to specify exactly where in the DOM you >want DataTables to inject the various controls it adds to the page (for example >you might want the pagination controls at the top of the table). DIV elements >(with or without a custom class) can also be added to aid styling."

Upvotes: 2

Related Questions