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

时间:2015-05-05 12:18:54

标签: javascript html jquery-datatables

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

<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运行。

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

1 个答案:

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

jsFiddle