Question

我正在使用jtable来显示数据以便于访问。

在这里，我的问题是php页面无法获取$data值，因此我无法检索查询的数据。它总是进入其他情况，不知道为什么!!

我努力但没有想法成功。任何帮助表示赞赏。

HTML:
    <link href="../layout/jtable/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="../layout/jtable/themes/metro/blue/jtable.css" rel="stylesheet" type="text/css" />

    <script src="../layout/scripts/jquery-latest.min.js" type="text/javascript"></script>
    <script src="../layout/scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../layout/jtable/jquery.jtable.js" type="text/javascript"></script>


<div align="center">
            <label class="" for="qstring"> <b class="red font-large"> <span class="icon-search"></span> Search &nbsp; </b> </label>
            <input type="text" id="qstring" name="qstring" class="search" style="height:30px; width:40%; font-size:16px" placeholder="Type Name or Department or Mobile" autofocus />
</div> 
<div id="EmployeeContainer"></div>

          <script type="text/javascript">

        $(document).ready(function () {
            $('.search').keyup(function(){
                $.ajax({
                    url: 'EMPActions.php',
                    type: 'get',
                    data: {qstr: $('input#qstring').val()},
                    success: function(response) {
                        $('#EmployeeContainer').jtable('load');
                        //$('#EmployeeContainer').html(response);
                    }
                });
            });

            //Prepare jTable
            $('#EmployeeContainer').jtable({
                title: 'Employee Details',
                actions: {
                    listAction: 'EMPActions.php?action=list'

                },
                fields: {
                    EID: {
                        title: 'EID',
                        width: '10%'
                    },
                    EName: {
                        title: 'EName',
                        width: '20%'
                    },
                    Desgn: {
                        title: 'Designation',
                        width: '10%'                        
                    },
                    Dept: {
                        title: 'Department',
                        width: '15%'
                    },                  
                    Mobile: {
                        title: 'Mobile',
                        width: '15%'                        
                    },
                    EMail1: {
                        title: 'RGUKT Mail',
                        width: '15%'                        
                    },
                    EMail2: {
                        title: 'Other EMail',
                        width: '15%'                        
                    }
                }
            });

        });//

    </script>

PHP Page: EmpActions.php
<?php

    if(isset($_GET['qstr'])){
    $data = '%'.$_GET['qstr'].'%';
    }
    else{
    $data = '%';
    }

try
{   
    //echo $data;

    $table = "employee_data";

    //Open database connection
    //echo $data;
    $con = mysql_connect("localhost","root","xampp123");
    mysql_select_db("ecelldata_2013-14", $con);

      //Getting records (listAction)
      if($_GET["action"] == "list")
      {

        //Get records from database
        $result = mysql_query("SELECT * FROM ".$table." WHERE EName LIKE '$data'");
        //echo $data;
          //Add all records to an array
          $rows = array();
          while($row = mysql_fetch_array($result))
          {
              $rows[] = $row;
          }

          //Return result to jTable
          $jTableResult = array();
          $jTableResult['Result'] = "OK";
          $jTableResult['Records'] = $rows;
          print json_encode($jTableResult);
      }


      //Close database connection
      mysql_close($con);


}
catch(Exception $ex)
{
    //Return error message
    $jTableResult = array();
    $jTableResult['Result'] = "ERROR";
    $jTableResult['Message'] = $ex->getMessage();
    print json_encode($jTableResult);
}

?>

Answer 1

尝试：的 jquery的：

$.post('EMPActions.php',{ data = {qstr: $('input#qstring').val()} }, function(response) { $('#EmployeeContainer').jtable('load'); //$('#EmployeeContainer').html(response); },"json");

<强> PHP

if(isset($_POST['qstr'])){ $data = '%'.$_POST['qstr'].'%'; } else{ $data = '%'; }

Answer 2

你的键盘调用是这个php页面：

EMPActions.php?qstr=foo

该页面的结果从未使用过（已注释掉）该成功处理程序初始化表。但是，jtable有自己的系统来进行数据调用 jtable执行此操作以启用分页，排序，搜索等 - 每个对同一页面的调用略有不同这些电话看起来都像这样

EMPActions.php?action=list

请注意，qstr参数未传递给jtable调用

您需要做的是将qstr参数传递给jtable的初始化程序，以便来自jtable的所有数据调用都包含参数

这样的事情：

$('#EmployeeContainer').jtable({
    title: 'Employee Details',
    actions: {
        listAction: 'EMPActions.php?action=list&qstr='+ $('input#qstring').val()
        }
    ...
    });

请注意，这只会在最初设置qstr值 - 您需要使用jtable搜索来缩小加载到表中的结果

修改

好的，看完演示后，我觉得你想要做的更清楚一点。我最初以为你正在使用一些过滤器来设置表格;相反，您希望使用非jtable字段来不断过滤数据。

关于当前实时代码的一些注意事项：我认为你在listAction中缺少'='，但更重要的是，listAction只在你的代码中首次运行时被定义一次（并且文本框为空）。要使用过滤器框，您需要以某种方式更新每个密钥的jtable中的数据。

查看jtable API，我发现了两种可能性：

1：为listAction定义函数而不是字符串。这将使用字符串字段的当前版本来过滤数据，并允许正常的jtable功能，如排序。确定每个密钥，你应该调用$('#EmployeeContainer').jtable('load');来调用你的listAction函数。

listAction: function (postData, jtParams) { return $.Deferred(function ($dfd) { $.ajax({ url: 'EMPActions.php?action=list&qstr=' + $('input#qstring').val() + '&jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting, type: 'POST', dataType: 'json', data: postData, success: function (data) { $dfd.resolve(data); }, error: function () { $dfd.reject(); } }); }); },

2：在每个keyup上使用qstr参数调用load方法（而不是自己进行ajax调用）。这更简单，但禁用了正常的jtable功能。

$('#EmployeeContainer').jtable('load', { qstr: $('input#qstring').val() });

编辑＃2

用此替换您的代码，看看它是否有效。你需要在这个方法中使用$ _POST或$ _REQUEST，因为这是使用jtable来发出请求。

$(document).ready(function () { $('.search').keyup(function(){ $('#EmployeeContainer').jtable('load', { qstr: $('input#qstring').val() }); }); //Prepare jTable $('#EmployeeContainer').jtable({ title: 'Employee Details', actions: { listAction: 'EMPActions.php?action=list', createAction: 'EMPActions.php?action=create', updateAction: 'EMPActions.php?action=update', deleteAction: 'EMPActions.php?action=delete' }, fields: { EID: { title: 'EID', width: '10%' }, EName: { title: 'EName', width: '20%' }, Desgn: { title: 'Designation', width: '10%' }, Dept: { title: 'Department', width: '15%' }, Mobile: { title: 'Mobile', width: '15%' }, EMail1: { title: 'RGUKT Mail', width: '15%' }, EMail2: { title: 'Other EMail', width: '15%' } } }); });

Answer 3

在ajax上尝试将其作为数据

data:$('input#qstring'),

或

data: $('input[\'name=name_of_your_field]\]'),

Answer 4

终于得到了解决方案。我已将功能更改为

$('.search').keyup(function(e){ $('#EmployeeContainer').jtable('load', { qstr: $('input#qstring').val(), });

使用POST发送值qstr。所以在另一端，我将不得不使用$_POST['qstr']

ajax GET无法使用jtable将数据发送到php页面

4 个答案: