搜索不适用于数据表

时间:2014-09-16 12:00:56

标签: php jquery ajax jquery-ui datatable

从php脚本动态更新数据表。我们使用AJAX.Bere执行的下一个脚本是我的代码搜索不能使用数据表。当我是用户sAjaxSource数据搜索不工作时。没有使用sAjaxSource搜索数据。可以提供jsfiddle示例。并且pagenation不工作。并且页面限制不起作用。请帮助我。

<!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 () {

var oTable = "";
    $.datepicker.regional[""].dateFormat = 'yy-mm-dd';
    $.datepicker.setDefaults($.datepicker.regional['']);
    drawDataTable = function()
    {
      oTable = $('#example').dataTable({
        "bProcessing": true,
        "bServerSide": true,      
        "sAjaxSource": 'reg_users.php',  
        "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();
    oTable.fnClearTable();
   if (data.aaData.length)
      oTable.fnAddData(data.aaData);
   oTable.fnDraw();

    $('#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>   

    </tbody>
</table>  
</body>
</html>

这是reg_users.php

<?php 
        define('DB_SERVER', 'localhost'); // Your Database host
        define('DB_USERNAME', 'root'); // Your Database user name
        define('DB_PASSWORD', ''); // 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 ="";

        $dataArr['aaData'] = Array();
        while($row = mysqli_fetch_assoc($rs)){
            $r = Array();
            foreach($row as $key=>$value){
                $r[] = "$value";
            }
            $dataArr['aaData'][] = $r;
        } 
        header('Content-Type: application/json');
        echo json_encode($dataArr);
       ?>

这是Chips_AddedByAdmin.php

<?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);
    }
?>

请帮帮我。

1 个答案:

答案 0 :(得分:0)

  

...搜索不起作用...分页不起作用...页面限制不起作用...

那么,您在服务器端代码中执行这些操作的位置?

除了获取所有记录外,我看不到过滤,分页或其他任何事情:

$sql = "SELECT nickname, email ,created_date_time,real_chips FROM users ";
$rs = mysqli_query($connection,$sql);

使用server-side processing in DataTables,JavaScript代码会向服务器发送其他参数,以指示搜索字符串,页面大小,页码等。然后,您可以在查询服务器中执行该逻辑-侧。 (因此术语&#34;服务器端处理。&#34;)请参阅DataTables文档:

  

启用服务器端处理后,DataTable执行的所有分页,搜索和排序操作都将传递给服务器,在该服务器上,SQL引擎(或类似工具)可以对大型数据集执行这些操作(毕竟,&#39) ; s数据库引擎的设计目的!)。因此,每次绘制表都会产生新的Ajax请求以获取所需的数据。

PHP here中有这样一个服务器端脚本的例子。例如,要执行分页,脚本会检查耗材表单值并修改SQL查询:

/*
 * Paging
 */
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
{
    $sLimit = "LIMIT ".intval( $_GET['iDisplayStart'] ).", ".
        intval( $_GET['iDisplayLength'] );
}

然后继续执行类似的查询修改以进行排序,过滤等。


另外,作为旁注,看起来您正在以纯文本格式存储用户密码。 永远不要以纯文本 存储用户密码。您的用户 严重不负责任