Datatable functions not working after xml request

Farid007

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Farid007

Datatable functions not working after xml request

kthorngren

The place to start is to see if you are getting errors in the browser's console.

Maybe you can provide more details around the XML request and how it relates to Datatables. Better is to provide a link to your page or a test case replaicting the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Farid007

After xml file upload data table features not working or giving no data available in table

kthorngren

You didn't answer my questions. Do you see errors in the browser's console?

Again please provide more details about the XML upload. Datatables doesn't have an XML upload option. In order for us to debug we will need to see the problem. At a minimum post your relevant Javascript code with details of what you are doing when the error occurs. Better is a line to your page or a test case replicating the problem so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Farid007

no error giving in console

kthorngren

Since you don't want to provide any details I will guess the problem is you are populating the HTMl table after initializing Datatables. Datatbles doesn't know about this so it show 0 rows of data. Make sure you first populate the HTML table then initialize Datatables. If this doesn't help then you will need to provide the details requested above.

Kevin

Farid007

I think you are right answer

Farid007

<table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
       <thead>
           <tr>
               <th style="width:15%">Unit</th>
               <th style="width:9%">Order Date</th style="width:7%">
                <th style="width:8%">Order# </th>
                 <th style="width:12%">Customer</th>
                 <th style="width:20%">Deliver To</th style="width:7%">
                  <th style="width:10%">OGP#/Date</th>
                   <th style="width:5%">Driver/Cell#/Vehicle#/bilty</th>
                   <th style="width:7%">Carriage/CarriageBy</th>

               </tr>
           </thead>
            <tbody id="allunit" name="allunit">
                                       
             </tbody>
    </table>

<script>
    function showmydata(pwh_id) {
        var option_id = $('#option').val();
        const xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                document.getElementById('allunit').innerHTML =
                    this.responseText;
            }
        };

        xhttp.open("GET", "fetchorder_ajax.php?wh_id=" + pwh_id + "&option_id=" + option_id);
        xhttp.send();
    }
</script>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Add you Datatables initialization after this:

                document.getElementById('allunit').innerHTML =
                    this.responseText;

Kevin

Farid007

Sir im calling their xml file how i initialization this first

allan

Did you implement Kevin's suggestion. Did it work? It should do - it is correct. If it didn't please link to a test case showing the issue as Kevin has already asked for twice above.

Allan

Farid007

<script type="text/javascript">
        $(document).ready(function() {/* BASIC ;*/
            var responsiveHelper_dt_basic = undefined;
            var responsiveHelper_datatable_fixed_column = undefined;
            var responsiveHelper_datatable_col_reorder = undefined;
            var responsiveHelper_datatable_tabletools = undefined;
            var breakpointDefinition = {
                tablet: 1024,
                phone: 480
            };
            $('#dt_basic').dataTable({
                "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
                    "t" +
                    "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
                "autoWidth": true,
                
            });
        })
    </script>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

You are using an ajax request,, which is asynchronous, to fetch the data and populate the table. So you need to wait for this to complete before initializing Datatables. For example:

        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
 
                document.getElementById('allunit').innerHTML =
                    this.responseText;
                $('#dt_basic').dataTable({
                    "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
                        "t" +
                        "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
                    "autoWidth": true,
                 
                });
            }
        };

Please also use Markdown code formatting by placing triple back ticks (```) on new lines before and after the code block.

Kevin

Farid007

How i reduce the wait for this to complete before initializing Datatables

Farid007

<script type="text/javascript">
        $(document).ready(function() {/* BASIC ;*/
            var responsiveHelper_dt_basic = undefined;
            var responsiveHelper_datatable_fixed_column = undefined;
            var responsiveHelper_datatable_col_reorder = undefined;
            var responsiveHelper_datatable_tabletools = undefined;
            var breakpointDefinition = {
                tablet: 1024,
                phone: 480
            };
            $('#dt_basic').dataTable({
                "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
                    "t" +
                    "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
                "autoWidth": true,
                 
            });
        })
    </script>

Sir datatable search give no data found after call load data from xml file

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Please also use Markdown code formatting by placing triple back ticks (```) on new lines before and after the code block.

How i reduce the wait for this to complete before initializing Datatables

The XMLHttpRequest() request is fetching data from the server. The delay is the time it takes the server to process the request and return the data.

datatable search give no data found after call load data from xml file

It doesn't look like you made the changes I suggested above. Please moving the datatables init code as I show above.

Kevin

Farid007

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

    document.getElementById('allunit').innerHTML =
        this.responseText;
    $('#dt_basic').dataTable({
        "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
            "t" +
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
        "autoWidth": true,

    });
}

};
Onclick this give this error
DataTables warning: table id=dt_basic - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

kthorngren

The first step is to review the troubleshooting steps in the link provided:
http://datatables.net/tn/3

You need to "move" the datatables init code not copy it. Remove the original initializations code.

Kevin

Farid007

im very thankful to you
this runing ok
This solve my problem only give me one error

DataTables warning: table id=dt_basic - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

i<script type="text/javascript">
        $(document).ready(function() {/* BASIC ;*/
            var responsiveHelper_dt_basic = undefined;
            var responsiveHelper_datatable_fixed_column = undefined;
            var responsiveHelper_datatable_col_reorder = undefined;
            var responsiveHelper_datatable_tabletools = undefined;
            var breakpointDefinition = {
                tablet: 1024,
                phone: 480
            };
            $('#dt_basic').dataTable({
                "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
                    "t" +
                    "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
                "autoWidth": true,
                 
            });
        })
    </script>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Remove lines 11-17. Only initialize Datatables in the xhttp.onreadystatechange function.

Kevin

Farid007

I'm very thankful to you
My problem is solved

Farid007

``` xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

    document.getElementById('allunit').innerHTML =
        this.responseText;
    $('#dt_basic').dataTable({
        "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
            "t" +
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
        "autoWidth": true,

    });
}

}; ```
In this script datatable footer not working ok after one click

kthorngren

In this script datatable footer not working ok after one click

What exactly is not working. Please provide a link to your page or a running test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Farid007

There four columns but it show 1 to 10 of 12

kthorngren

You asked the same question in this [thread]](https://datatables.net/forums/discussion/75270/datatable-function-not-work-proper#latest). Please don't duplicate questions. Look for my answer there.

Kevin