Not Update datatables properly but in database updated

Question

When we update the records in database its updated perfectly and not reflected in datatables. When we refresh the page datatables are updated.I need with out refresh the page datatables are updated.please help me.

<?php
            define('DB_SERVER', 'localhost'); // Your Database host
            define('DB_USERNAME', 'root'); // Your Database user name
            define('DB_PASSWORD', 'root'); // Your Database password
            define('DB_DATABASE', 'qwer'); // Your Database Name
            $connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE); // Connection
            $sql = "SELECT nickname, email ,created_date_time,real_chips FROM users ";
            $rs = mysqli_query($connection,$sql);
            $str ="";
            $data   = array();
            while ($row = mysqli_fetch_assoc($rs)) 
            {
              $str .= '<tr id="dialog-confirm">';
              $str .= '<td>'.$row["nickname"].' </td> <td>'. $row["email"].'</td><td>'. $row["created_date_time"].'</td><td>'. $row["real_chips"].'</td>';
              $str .= '</tr>';
            }
?>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Admin demo</title>
  <style type="text/css" title="currentStyle">
            @import "demo_page.css";
            @import "demo_table.css";               
   </style>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">  
  <!--<link rel="stylesheet" type="text/css" href="/css/result-light.css">   -->
  <script type='text/javascript' src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
  <script type='text/javascript' src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {
    $.datepicker.regional[""].dateFormat = 'yy-mm-dd';
    $.datepicker.setDefaults($.datepicker.regional['']);

    drawDataTable = function()
    {

     $('#example').dataTable({
        "aoColumns": [{
            "sWidth": "200px"
        },
        null,
        null,
        null]
    })
        .columnFilter({
        sPlaceHolder: "head:before",
        aoColumns: [{
            type: "text"
        }, {
            type: "text"
        }, {
            type: "date-range"
        },{
            type: "text"
        }]
    });
   }

   // call datatable for the first time when page loads
   drawDataTable();

    $('#example').on("click", "tr#dialog-confirm", function () {
        var tableData = $(this).children("td").map(function () {
            return $(this).text();
        }).get();
        //' + $.trim(tableData[0]) + '

        var dynamicDialog = $('<div id="MyDialog" > <div><div style="width:150px;float:left;">Amount</div><div style="float:left;">:</div><div style="width:150px;float:left;"><input type="text" name="amount" id="amount" style="width:150px;"/><input type="text" name="nickname" id="nickname" value="'+$.trim(tableData[0])+'" style="display:none;"/></div></div><div><div style="width:150px;float:left;">Password</div><div style="float:left;">:</div><div style="width:150px;float:left;"><input type="password" name="password" id="password" style="width:150px;"/></div></div></div>');
        dynamicDialog.dialog({
            title: "Admin chips adding",
            modal: true,
            height: 250,
            width: 400,
            buttons: [{
                text: "Yes",
                click: function () 
                {
                    $.ajax({
                        type: "POST",
                        dataType: "html",
                        url: "Chips_AddedByAdmin.php",
                        cache: false,
                        data: {
                            username: $.trim(tableData[0]),
                            amount: $('#amount').val(),
                            password: $('#password').val()
                        },
                        beforeSend: function () {
                            $('#MyDialog').html('loading please wait...');
                        },
                        success: function (htmldata) {
                            //destroy existing datatable
                            $('#example').dataTable().fnDestroy();

                            //call datatable 
                            drawDataTable();

                            $('#MyDialog').html("You have successfully updated the database");
                            dynamicDialog.dialog("close");

                        }
                    });

                }
            }, {
                text: "No",
                click: function (e) {
                    $(this).dialog("close");
                }
            }]
        });

    });
});
});//]]>  

</script>
</head>
<body>
  <table id="example" class="display">
    <thead>
        <tr>
            <th style="width: 150px;">UserName</th>
            <th style="width: 150px;">Email</th>
            <th style="width: 180px;">Created Date</th>
             <th style="width: 180px;">Real Chips</th>
        </tr>
        <tr>
            <th style="width: 150px;">UserName</th>
            <th style="width: 150px;">Email</th>
            <th style="width: 180px;">Created Date</th>
             <th style="width: 180px;">Real Chips</th>
        </tr>
    </thead>
    <tbody>        
            <?php       
                echo $str;
            ?>  
    </tbody>
</table>

</body>


</html>

And ajax dataupdate php is here

<?php
require_once("configure.php");
echo $nickname = $_POST['username'];
echo $amount = $_POST['amount'];
echo $password = $_POST['password'];

echo $sql = "SELECT * FROM users WHERE nickname ='admin' and password='$password';";
$rs = mysqli_query($connection,$sql);

$numrows=mysqli_num_rows($rs);
if($numrows > 0)
{

    echo $sql = "update users set real_chips=real_chips+'$amount' where nickname='$nickname';";
    $rs = mysqli_query($connection,$sql);
}
?>

Control Freak · Accepted Answer · 2014-09-16 06:57:20Z

1

Not sure what you have going on here, but this is completely different than how I would do it.

Lets say I had a datatable defined like this:

 oTable = $("table").dataTable({ ... settings ... });

If I ever wanted to refresh that datatable, all I would ever have to call is:

 oTable.fnDraw();

That's it.

Destroying, building extra functions, etc. is not needed like in your code. It's all right there for you when you open the doc's up.

answered Sep 16, 2014 at 6:57

Control Freak

13.2k31 gold badges101 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vamsikrishnareddy Over a year ago

In above posted example drawDataTable() calls but in the datatable recored are not updated from the datadase. means we need to update this <?php echo $str; ?> .How can we do this dynamically.@Zee Tee

Collectives™ on Stack Overflow

Not Update datatables properly but in database updated

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related