如何解决数据表问题 reload()
我想根据 textarea 的内容填充 jQuery 数据表。注意:我的数据表实现不是服务器端。即:排序/过滤发生在客户端。
我知道我的 PHP 可以正常工作,因为它在我的测试场景中返回了预期的结果(见下文)。我已经包含了很多代码来提供上下文。我是数据表和 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);
});
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);
}
解决方法
查看 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();
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。