jquery - 使用数据表 jquery 库中的服务器端添加按钮获取所选项目值
问题描述
Datatables Jquery 服务器端示例项目链接:
与本文类似,但不使用 C#。
下面的代码在正确的行中正确地获得了正确的价格。
$(document).on('click','.add_btn',function (){
var id = $(this).attr("id");
var dataRow = $('#example').DataTable().row( id ).data();
var price = dataRow[2];
所以,我希望答案看起来像:
var qtd = dataRow[3]; //[3] because the select options is the next column
var qtd_num = document.getElementById(qtd).selectedOptions[0].value;
一个令人困惑的部分是获取元素 ID 以将其插入上述公式。因为现在的 id 是 meta.row 使用数据表库(可能需要改变?)。这是我的完整代码:
<script type="text/javascript">
var numbers= [1, 2 , 3, 4];
$(document).ready(function() {
var table= $('#example').DataTable( {
"processing": true,
"serverSide": true,
ajax: {
url: 'server.php',
type: 'POST',
},
columnDefs: [
{ targets: -1,
render: function (data, type, row, meta) {
return '<button type="submit" class="add_btn btn btn-success btn-md active" data-id="' + meta.row + '" id=" ' + meta.row + ' " value="add"> <span class="glyphicon glyphicon-plus"></span> </button>';
}
},
{
targets: -2,
render: function (data, type, row, meta){
var $select = $('<select data-id="' + meta.row + '" id="' + meta.row + ' " ></select>', {
});
$.each(numbers, function (k, v, row, meta) {
var $option = $("<option></option>", {
"text": v,
"value": v
});
if (data === v) {
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
}
} ],
})
} ); // end ready
</script>
解决方案
var qtd = dataRow[3];
等于没有,因为[3]
返回的数据中没有引发错误的索引。
访问该行中的选择的更简单途径:
$(document).on('click','.add_btn',function (){
var id = $(this).attr("id");
var dataRow = $('#example').DataTable().row( id ).data();
var price = dataRow[2];
var qtd_num = $(this).closest('tr').find('select').val()
...
})
推荐阅读
- linux - 为什么系统调用会破坏 rcx 和 r11?
- c++ - 无效的句柄窗口调试器
- java - 自动装配在 XML 中定义的 bean - Spring Boot
- python - 模块存在,pyCharm 建议我的名称,但导入失败
- mysql - SQL:如果满足其他行的条件,则在并发情况下更新一行
- node.js - node.js 与 docker 中的子进程
- python - 如何使用 matplotlib / seaborn 和 pandas 数据框创建具有共享 x 轴的倒置条形图
- python-3.x - 从医学图像的正视图中获取带有事件的 zdata
- java - 如何在kafka中加入2个流?
- java - 安静的使用 ejb