"Processing" text's div is outside of the table

bahadirT

The "Processing" message is showing static, in the middle of the page-viewing-part (outside of the table, just related to the page). By static, I mean when I scroll down the message's position doesn't change. When I check the position of the message's div, I see it is outside of the related table element. How can I alter my table so that shows the message in the middle of the related table statically?

My js code:

jQuery('#table').DataTable({
        "ajax": {
            url: "url_to_service",
            type: 'REQUEST_TYPE'
        },
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, jQuery("div[id='global.all']").html()]],
        "processing": true,
        "serverSide": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "columns": [
            { "data": "data1" },
            { "data": "data2" },
            { "data": "data3" },
            { "data": "data4" },
            { "data": "data5" },
            { "data": "data6" },
            { "data": "data7" }
        ],
        columnDefs: [
            {orderable: false, targets: [6]}
        ],
        "order": [[ 5, "desc" ]],
        "dom": 'Blfrtip',
        "buttons": [
            {
                extend: 'copy',
                exportOptions: {
                    columns: exportColumnstToFile
                }
            }, 
            {
                extend: 'csv',
                exportOptions: {
                    columns: exportColumnstToFile
                }
            }, 
            {
                extend: 'excel',
                exportOptions: {
                    columns: exportColumnstToFile
                }
            },
            {
                extend: 'pdf',
                exportOptions: {
                    columns: exportColumnstToFile
                }
            }
        ]
    });

My html part:

<table id="table" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>field</th>
                    <th>field</th>
                    <th>field</th>
                    <th>field</th>
                    <th>field</th>
                    <th>field</th>
                    <th>field</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                </tbody>
</table>

My final result of the table:

<div id="table_processing" class="dataTables_processing" style="display: none;">Processing...</div>
<table id="table" class="table table-bordered table-striped dataTable no-footer" role="grid" aria-describedby="table_info" style="width: 1572px;">...</table>

As you can see, the processing div is outside of my table. What I want is to see the div like:

<table id="table" class="table table-bordered table-striped dataTable no-footer" role="grid" aria-describedby="table_info" style="width: 1572px;">
    <div id="table_processing" class="dataTables_processing" style="display: none;">Processing...</div>
</table>

... so that The "Processing" text appears in the middle of the table statically.

What must I do?

# EDIT: What I want is not inside but under the table like:

F12Magic

That will never work. A div tag inside a table tag isn't correct html.
For more information see THIS forum thread.
Or look at THIS jsfiddle for an example how you can use processing option

bahadirT

Aah sorry, it is not inside it is under the table, thank you very much. So how can I make it to be appeared under the table?

bahadirT

Ah Ok @F12Magic, thank you very much for your answer. My code is previously created by another developer and it is a little bit complicated to understand so I just mixed things and could not get the "sdom" thing (because there are three table initiating codes and I do not know which one is initiating what). So, what I didn't get is the classes useg with sdom. What I must use is to set the used classes for each component so that the processing is under the table and the navigation buttons are under the processing text (and this fixes the table and shows the processing text in the middle of it). It was not about placing inside or under the table as you said, thank you very much.

bahadirT

Also I have clicked your answer for "no" and now don't know how to accept yours Answer again plz.

F12Magic

So, is your problem resolved now?

bahadirT

Yes yes, by providing the needed classes to data-tables components with the "sdom" property like sDom = "<'clazz'lf><'clazz-2'tr>ip" set the components where I need them to be. Thank you.