我有一个运行以下内容的网页:
<script type="text/javascript">
$(document).ready(function () {
$('#example').DataTable({
"oLanguage": {
"sLengthMenu": '<select class="form-control input-sm m-b-10" style="width:80%">' +
'<option value="10">10 Records</option>' +
'<option value="20">20 Records</option>' +
'<option value="50">50 Records</option>' +
'<option value="100">100 Records</option>' +
'<option value="-1">All</option>' +
'</select>'
}
});
});
</script>
这一直工作正常,直到我提出以下内容;
<div class="block-area" id="custom-select">
<div class="row">
<div class="col-md-2 m-b-15">
<select class="select">
<optgroup label="Group 1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</optgroup>
</select>
</div>
</div>
</div>
经过测试,它似乎是<select>
标签,特别是导致问题并阻止JS运行。
我不明白为什么。有人可以解释一下这个问题是什么吗?
答案 0 :(得分:2)
您忘记为value
标记添加option
属性。如果没有该属性,插件就无法知道您要显示多少行。
所以更新你的代码:
var menu = '<div class="block-area" id="custom-select">'
+'<div class="row">'
+'<div class="col-md-2 m-b-15">'
+'<select class="select">'
+'<optgroup label="Per 10">'
+'<option value="10">10</option>'
+'<option value="20">20</option>'
+'<option value="30">30</option>'
+'</optgroup>'
+'<optgroup label="Per 50">'
+'<option value="50">50</option>'
+'<option value="100">100</option>'
+'</optgroup>'
+'</select>'
+'</div>'
+'</div>'
+'</div>'
$(document).ready(function(){
$('#example').DataTable({
"oLanguage": {
"sLengthMenu": menu
}
});
});