Datatable functions not working after xml request

Datatable functions not working after xml request

Farid007Farid007 Posts: 30Questions: 2Answers: 0

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

Answers

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0

    Datatable functions not working after xml request

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

    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

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0

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

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

    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

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0

    no error giving in console

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

    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

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0

    I think you are right answer

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0
    edited January 2023
    <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

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

    Add you Datatables initialization after this:

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

    Kevin

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0

    Sir im calling their xml file how i initialization this first

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0
    edited January 2023
    <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

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

    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

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0

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

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0
    edited January 2023
    <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

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

    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

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0

    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

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

    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

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0
    edited January 2023

    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

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

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

    Kevin

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0

    I'm very thankful to you
    My problem is solved

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0

    ``` 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

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

    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

  • Farid007Farid007 Posts: 30Questions: 2Answers: 0


    There four columns but it show 1 to 10 of 12

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

    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

Sign In or Register to comment.