datatable function not work proper

Farid007

Datatable features work on behalf of first click button not work on second button c

Farid007

        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;
                        
                    $('#dt_basic').dataTable({
                       
                        "autoWidth": true,
                        
                        retrieve: true,
                        paging: true,
                        
                    });
                   
                    
                }
            };

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

Datatable features work on behalf of first click button not work on second button c

Farid007

There is four recodrs of BB unit but datatable show order of all unit because i press all unit first , if press BB first then show order four in all units

kthorngren

Something doesn't look right. The Datatable should be displaying 10 rows but there are only 4 shown. This suggests that something outside of Datatables is manipulating the table. Are you hiding rows or changing the table data in some way?

Kevin

Farid007

I take data from database using button im not hidding rows

Which button push first datatable only work for it not for other buttons

I think drawback not work on second click on button for second time

kthorngren

Post the code that executes when clicking the buttons. It seems the buttons are manipulating the table data without using Datatable tools. Datatables won't know about table changes unless Datatables APIs are used.

Kevin

Farid007

Can you give me your email i will send you compelete code

Farid007

Select List All Pending Delivered

<?php $sql = "SELECT wh_id, wh_name FROM i_whouse order by wh_name"; $result = mysqli_query($con, $sql) or die("error"); echo "<button class='btn btn-danger ' onclick='showmydata(0)' >All Units"; $i = 1; if (mysqli_num_rows($result) > 0) { while ($row = mysqli_fetch_assoc($result)) { if ($i == 0) { $color = 'btn btn-primary'; $i = 1; } else { $color = 'btn btn-success'; $i = 0; } echo "" . $row['wh_name'] . ""; } } ?>

kthorngren

Can you give me your email i will send you compelete code

I don't want the complete code.. I just want the event handler code that runs when clicking one of the buttons. Please post it here.

Kevin

Farid007

$where2 = '';
if ($wh_id > 0)
    $where =  ' and o.wh_id = ' . $wh_id;
else
    $where = ''; = ' and ogp.ogp_num is not null';

 echo "<button class='btn btn-danger ' onclick='showmydata(0)' >All Units</button>";
                                            $i = 1;

                                            if (mysqli_num_rows($result) > 0) {
                                                while ($row = mysqli_fetch_assoc($result)) {

                                                    if ($i == 0) {
                                                        $color = 'btn btn-primary';
                                                        $i = 1;
                                                    } else {
                                                        $color = 'btn btn-success';
                                                        $i = 0;
                                                    }

                                                    echo "<button  value='' class='" . $color . "' onclick='showmydata(" . $row['wh_id'] . ")' >" . $row['wh_name'] . "</button>";
                                                }
                                            }
                                            ?>

allan

You should do:

if (DataTable.isDataTable('#dt_basic')) {
  $('#dt_basic').DataTable().destroy();
}

document.getElementById('allunit').innerHTML = this.responseText;
                         
$('#dt_basic').DataTable();

i.e. if there is an existing DataTable, destroy it before you overwrite its HTML. Otherwise you'll have memory leak issues.

That said, I'm not sure that will fix the issue with it not working on the second click. I suspect we'd need a link to a test case showing the issue to be able to properly debug that.

Allan

Farid007

if (DataTable.isDataTable('#dt_basic')) {
  $('#dt_basic').DataTable().destroy();
}
 
document.getElementById('allunit').innerHTML = this.responseText;
                          
$('#dt_basic').DataTable();

If i use this then datatable din't show

Farid007

$('#dt_basic').dataTable().fnDestroy();
  
var table = $('#dt_basic').dataTable({

If i use this then only frist time only one button is pressable second time no button will be pressed

kthorngren

Its impossible to say what the problem might be without being able to see it. To help troubleshoot we will need a link to your page or a test case demonstrating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Farid007

T
datatable show their features on the basis of first click only see in the image

kthorngren

Sorry but screenshots and code snippets are enough for us to help troubleshoot. We need the ability to understand the code flow. A running test case showing the issue will help us to understand the code flow.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Farid007

https://jsfiddle.net/Farid009/ovdmLyj0/8/
Check full code

kthorngren

The test case doesn't run. I don't see any Datatables code. The idea is to provide a running test case that shows the issue. If you are building a test case it won't have access to the database for the sql statements. You will need to simulate the data by building the HTML table, like this example or providing the table data using Javascript like this example.

What we are interested in is seeing the buttons not working after the first click. The actual data doesn't matter.

Kevin

Farid007

```
bDestroy :true,
``
by using this script allow one time click only how i multiple click using this

kthorngren

If you are overwriting the HTML table with a new table then you must use destroy() before overwriting the HTML table. Once you have repopulated the HTML table then reinitialize the Datatable. Basically what Allan posted earlier:

if (DataTable.isDataTable('#dt_basic')) {
  $('#dt_basic').DataTable().destroy();
}
 
document.getElementById('allunit').innerHTML = this.responseText;
                          
$('#dt_basic').DataTable();

Kevin

Farid007

Thanks all of you