javascript - 自定义长度选择菜单在 DataTable 中不起作用

Question

我有一个运行以下内容的网页:

<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 运行的具体标记。

我不明白为什么。有人可以解释一下可能是什么问题吗？

Answer 1

您忘记为 option 标记添加 value 属性。如果没有该属性，插件就无法知道您要显示多少行。

所以更新你的代码:

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
        }
    });
});

jsFiddle