datatables reload()的问题

Question

我想根据文本区域的内容填充一个jQuery数据表。注意:我的datatables实现不是服务器端的。也就是说:排序/过滤发生在客户端。

我知道我的php在我的测试场景中会返回预期的结果(见下文)。我已经包含了很多代码来提供上下文。我对datatables和php不熟悉。

我的html看起来像这样：

​

// DataTable Initialization
// (no ajax yet)
$('#selectedEmails').DataTable({
        select: {
            sytle: 'multiple',
            items: 'row'
        },
        
        paging: false,
        scrollY: '60vh',
        scrollCollapse: true,

        columns: [
            {data: "CONICAL_NAME"},
            {data: "EMAIL_ADDRESS"}

        ]
    });
    
 // javascript that defines the ajax (called by textarea 'onfocus' event)
 function getEmails(componentID) {
    deselectTabs();
    assignedEmails =        document.getElementById(componentID).value.toUpperCase().split(",");
    alert(JSON.stringify(assignedEmails)); //returns expected json
    document.getElementById('email').style.display = "block";
    //emailTable = $('#selectedEmails').DataTable();
    try {
        $('#selectedEmails').DataTable().ajax =
                {
                    url: "php/email.php",
                    contentType: "application/json",
                    type: "POST",
                    data: JSON.stringify(assignedEmails)
                    
                };
        
        $('#selectedEmails').DataTable().ajax.reload();
    } catch (err) {
        alert(err.message); //I get CANNOT SET PROPERTY 'DATA' OF null 
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- table skeleton -->
<table id="selectedEmails" class="display" style="width: 100%">
  <thead>
    <tr>
      <th colspan='2'>SELECTED ADDRESSES</th>
    </tr>
    <tr>
      <th>Conical Name</th>
      <th>Email Address</th>
    </tr>
  </thead>
</table>
               
<!-- textarea definition -->
<textarea id='distribution' name='distribution' rows='3' 
  style='width: 100%'                                                onblur="validateEmail('INFO_DISTRIBUTION', 'distribution');"
  onfocus="getEmails('distribution');">
</textarea>

​

下面的代码返回预期的json：

​

  var url = "php/email.php";
    
  emailList = ["someone@mycompany.com","someoneelse@mycompany.com"];
  
  fetch(url, {
    method: 'post',
    body: JSON.stringify(emailList),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(function (response) {
    return response.text();
  }).then(function (text) {


    alert( JSON.stringify( JSON.parse(text))); //expencted json

  }).catch(function (error) {
        alert(error);
 });

​

php代码：

require "openDB.php";

if (!$ora) {
    $rowsx = array();
    $rowx = array("CONICAL_NAME" => "COULD NOT CONNECT", "EMAIL_ADDRESS" => "");
    $rowsx[0] = $rowx;
    echo json_encode($rowsx);
} else {

//basic query
$query = "SELECT CONICAL_NAME, EMAIL_ADDRESS "
        . "FROM SCRPT_APP.BCBSM_PEOPLE "
        . "WHERE KEY_EMAIL LIKE '%@MYCOMANY.COM' ";

//alter query to get specified entries if first entry is not 'everybody'
if ($emailList[0]!='everybody') {
    $p = 0;
    $parameters = array();
    foreach ($emailList as $email) {
       $parmName = ":email" . $p;
        $parmValue = strtoupper(trim($email));
        $parameters[$p] = array($parmName,$parmValue);
        $p++;
        
    }
    
    $p0=0;
    $query = $query . "AND KEY_EMAIL IN (";
    foreach ($parameters as $parameter) {
        if ($p0 >0) {
            $query = $query.",";
        }
        $query = $query.$parameter[0];
        $p0++;
    }
    $query = $query . ") ";
    $query = $query . "ORDER BY CONICAL_NAME";
    
    $getEmails = oci_parse($ora, $query);
    
    foreach ($parameters as $parameter) {
        oci_bind_by_name($getEmails, $parameter[0], $parameter[1]);
    }
}
 oci_execute($getEmails);


$row_num = 0;
try {
    while (( $row = oci_fetch_array($getEmails, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {
        $rows[$row_num] = $row;
        $row_num++;
     
    }
    $jsonEmails = json_encode($rows, JSON_INVALID_UTF8_IGNORE);
    if (json_last_error() != 0) {
        echo json_last_error();
        
    }
   } catch (Exception $ex) {
    
      echo $ex;
  }


echo $jsonEmails;


   oci_free_statement($getEmails);
   oci_close($ora);
}

Answer 1

查看DataTables站点上的几个示例，我发现我让这件事变得比需要的更加困难:以下是我的解决方案：

HTML：(未更改)

<table id="selectedEmails" class="display" style="width: 100%">
   <thead>
      <tr>
         <th colspan='2'>SELECTED ADDRESSES</th>
      </tr>
      <tr>
         <th>Conical Name</th>
         <th>Email Address</th>
      </tr>
   </thead>
</table>

<textarea id='distribution' name='distribution' rows='3' 
   style='width: 100%'
   onblur="validateEmail('INFO_DISTRIBUTION', 'distribution');"
   onfocus="getEmailsForTextBox('distribution');">
</textarea>

javascript:注意:关键是data:的函数，它返回json。(我的php代码期望json作为输入，当然还有输出json)。

初始化

var textbox = 'developer'; //global variable of id of textbox so datatables can use different textboxes to populate table

$(document).ready(function () {

    $('#selectedEmails').DataTable({
        select: {
            sytle: 'multiple',
            items: 'row'
        },

        ajax: {
            url: "php/emailForList.php",
            contentType: "application/json",
            type: "post",
            data: function (d) {
                return  JSON.stringify(document.getElementById(textbox).value.toUpperCase().split(","));
            },
            dataSrc: ""
        },

        paging: false,
        scrollY: '60vh',
        scrollCollapse: true,

        columns: [
            {data: "CONICAL_NAME"},
            {data: "EMAIL_ADDRESS"}

        ]
    });
});

重绘表的代码

function getEmailsForTextBox(componentID) {
    deselectTabs();
    document.getElementById('email').style.display = "block";

    textbox = componentID; //textbox is global variable that DataTable uses as  source control
    $('#selectedEmails').DataTable().ajax.reload();

}