在更改事件上加载jQuery DataTable
Load jQuery DataTable on change event
我正在使用此脚本在ready
:上加载DataTable
function renderDataTable(serviceUrl)
{
var $dataTable = $('#example1').DataTable({
"ajax": serviceUrl,
"iDisplayLength": 25,
"order": [[2, "asc"]],
"scrollY": 600,
"scrollX": true,
"bDestroy": true
});
});
以下是ready
事件:
$(document).ready(function()
{
renderDataTable('api/service_teus.php');
});
PHP脚本如下:
<?php
$select = "SELECT SERVICE, SIZE_TYPE, TEUS FROM table";
$query = mysqli_query($dbc, $select) or die(mysqli_error());
$out = array();
while($row = $query->fetch_assoc())
{
$out[] = $row;
}
echo json_encode($out);
mysqli_free_result($query);
?>
以上所有代码都可以正常工作。DataTable在页面准备就绪时加载,DataTable的工作方式与预期的一样
我需要做的是为用户创建一种能力,当在具有ID#serviceload的下拉列表中选择一个新选项时,该功能可以重新加载数据表。
所以我删除了ready
事件。
现在,在JavaScript中,我创建了一个change
事件:
$('#serviceload').change(function()
{
var page = $('#serviceload').val(); // user selection
var $dataTable: $('#example1').DataTable({ // datatable
"ajax": "api/service_teus.php", {page: page}, // here is where I think the problem lies
"data": data,
"iDisplayLength": 25,
"order": [[2, "asc"]],
"scrollY": 600,
"scrollX": true,
"bDestroy": true
});
});
很可能,我猜错误在上面的ajax调用中。
我稍微修改了一下PHP脚本,如下所示:
<?php
if($_POST['page'] == true)
{
$service = mysqli_real_escape_string($dbc, $_POST['page']);
$select = "SELECT SERVICE, SIZE_TYPE, TEUS FROM table WHERE SERVICE - '$service'";
$query = mysqli_query($dbc, $select) or die(mysqli_error());
$out = array();
while ($row = $query->fetch_assoc())
{
$out[] = $row;
}
echo json_encode($out);
mysqli_free_result($query);
}
?>
我不确定我是否在上面的JavaScript中正确使用了AJAX调用。
因此,经过两周的研究,我终于找到了问题的解决方案。
由于我已经有了一个HTML下拉列表,在READY事件中,我添加了以下内容:
var table = $('#example1').DataTable();
$('#serviceload').on('change', function(){
table.columns(1).search( this.value ).draw();
});
我在这里找到了:http://jsfiddle.net/Ratan_Paul/5Lj6peof/1/
现在,当CHANGE事件被触发时,新数据被填充,而不向服务器发送变量,这就是我在上面的初始代码中试图做的。
您可以执行GET请求
var $dataTable: $('#example1').DataTable({
"ajax": {
"url": "scripts/server_processing.php",
"data": { page: page }
},
"data": data,
"iDisplayLength": 25,
"order": [[2, "asc"]],
"scrollY": 600,
"scrollX": true,
"bDestroy": true
});
并使用$_GET['page']
检索您的get参数
如果你真的想做POST,你可以做:
var $dataTable: $('#example1').DataTable({
"ajax": {
"url": "scripts/server_processing.php",
"data": function ( d ) {
d.page = page;
},
"type": "POST"
},
"data": data,
"iDisplayLength": 25,
"order": [[2, "asc"]],
"scrollY": 600,
"scrollX": true,
"bDestroy": true
});
我从来没有使用过数据表,我是从文档中得到的。希望这能有所帮助。
相关文章:
- 使用javascript函数在页面初始化后加载jquery
- 什么'这是加载jQuery的最佳方式
- 在WordPress站点中加载jquery.js后加载javascript代码
- 延迟加载jquery后替换$(document).ready(function)
- 如何使用onLoad加载jQuery JSON.从Zipcode On Form获取城市和州
- 对页面重新加载 Jquery 执行操作
- 在Ajax(过滤器)加载之后加载jQuery脚本
- 异步加载JQuery时Tabbed Box已损坏
- 加载Jquery时Chrome扩展出错
- 在更改事件上加载jQuery DataTable
- 手动加载JQuery而不触发内容安全策略
- 如果更改,请在ng之后重新加载Jquery
- 脚本似乎在加载jQuery之前运行-未定义Uncaught ReferenceError:$
- 在使用jquery之前动态加载jquery
- 如何重新加载jquery,以便它能为下一个进程工作
- Firefox没有't从ajax.googleapis.com加载jquery
- 我无法在自定义Wordpress主题中成功加载jQuery
- 正在从maphilight href加载Jquery选项卡
- 如何在完全加载html之后加载jquery代码段
- 在页面加载jQuery/Javascript时,按.class对表行进行排序