2

数据表上的日期选择器遇到一些问题。我在页面顶部设置了两个测试日期选择器，它们工作正常。

然而，我的问题是当我'{type:"date-range"}在我的 aoColumns 中选择时，我收到一个错误，告诉我这from.datepicker()不是一个函数。

我已经尝试了所有其他类型的过滤器（选择、数字范围等），并且除日期范围外，所有过滤器都正常工作。

谁能帮我解释为什么我的 JavaScript 似乎使用 type:"date-range" 崩溃了。我似乎无法弄清楚为什么它不会像这里显示的示例那样工作http://jquery-datatables-column-filter.googlecode.com/svn/trunk/dateRange.html

下面是代码

<body>
    <div id="content">
        </div><div id='assignments_view'>
        <h1>Assignments</h1><br/>
From:<input type="text" name="start_date" value="" id="dateStart" placeholder="start Date"  /><br/>
To:<input type="text" name="end_date" value="" id="dateEnd" placeholder="End Date"  /><br/>

<button id = "addNewAssignmentButton">Add New Assignment</button>
    <div id="assignmentTableDiv">

    <table id="assignmentTable" class="fht-table" >
        <thead>
            <tr>
                <th>Name</th>                   
                <th>Basic Information</th>
                <th>Submitter</th>
                <th>Status</th>
                <th>Area</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Shopping Cart</th>
                <th>Purchase Order</th>
            </tr>
        </thead>
        <tbody>
<tr class = "assignmentRow" ondblclick="document.location = 'assignments/load_individual_assignment_view/21 '">
        <td>Test assignment</td>
        <td>basic Info for test assignment</td>
<td class = 'status'>review</td> 
        <td>2013-01-08</td>
        <td>2013-01-01</td>
                    </tr>

        </tbody>
        <tfoot><tr class = "footer">
            </tr></tfoot>
    </table>
</div>
</div>


<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://localhost/ahb/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

<script src="http://localhost/ahb/js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script>
$(document).ready( function () {


var oTable = $('#assignmentTable')
            .dataTable( 
            {
                "bJQueryUI": true,

                }
            )
            .columnFilter({ sPlaceHolder: "head:before",
                            aoColumns: [    null,null,{type:"select"},null,null,
                            null,
                            {type:"date-range"},
                            null,
                               null,                                                
                                        ]}
            );
});

</script>



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="http://localhost/ahb/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

<script src="http://localhost/ahb/js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script>
$('#dateStart').datepicker({ dateFormat: "yy-mm-dd" });
$('#dateEnd').datepicker({ dateFormat: "yy-mm-dd" });
</script>


<div id="footer">
<footer>
    Page rendered in <strong>0.0951</strong> seconds
</footer>
</div>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if     offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://localhost/ahb/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via build script -->
<script src="http://localhost/ahb/js/plugins.js"></script>
<script src="http://localhost/ahb/js/script.js"></script>
<script src="http://localhost/ahb/js/jquery-placeholder.js"></script>
<script src="http://localhost/ahb/js/libs/jquery.dataTables.min.js"></script>
<script src="http://localhost/ahb/js/libs/jquery.dataTables.columnFilter.js">      </script>
<script src="http://localhost/ahb/js/libs/tabletools.js"></script>

<!-- end scripts -->
</body>
</html>
4

3 回答 3

3

解决了。1.8.2 的两个脚本发生冲突，导致 jQuery datepicker 无法工作。我只需要删除一个脚本，只在页面底部留下一个 1.8.2.min 版本。

于 2013-01-07T16:55:32.660 回答
1

我发现 input.datepicker 是一个 jQueryUI 的东西。解决方案是在页面中包含 jQueryUI，它神奇地起作用了。

顺便说一句，在没有 jQueryUI 的情况下，其他类型的列过滤器也可以正常工作，只有当我尝试使用日期范围过滤器时，我才注意到任何错误。相当微妙。

于 2015-08-10T15:57:17.927 回答
0

对我来说，问题是： https ://github.com/vitalets/bootstrap-datepicker 正在将事件正确地触发到数据表，调用了 ajax 更新表，但 https://github.com/eternicode/bootstrap-datepicker 不是

于 2013-05-29T15:25:16.683 回答