使用 Datepicker (FuelUX) 过滤中继器

Question

我正在尝试使用 Datepicker 过滤 Fuel UX 中继器。我怎样才能做到这一点？似乎中继器的“重新加载”事件甚至没有被触发，我不知道如何设置 options.filter 以包含包含在 Datepicker 字段中的日期。

html:

    <div class="repeater" id="myRepeater" data-staticheight="true" style="position:absolute; top:25px; right:25px; bottom:25px; left:25px;">
        <div class="repeater-header">
            <div class="repeater-header-left">
                <span class="repeater-title">Repeater</span>
                <div class="repeater-search">
                    <div class="search input-group">
                        <input type="search" class="form-control" placeholder="Search"/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-search"></span>
                                <span class="sr-only">Search</span>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="repeater-header-right">

                <div class="btn-group selectlist repeater-filters" data-resize="auto" style="width:200px">

                    <div>
                        <div class="datepicker" data-initialize="datepicker" id="myDatepicker">
                            <div class="input-group">
                                <input class="form-control" id="myDatepickerInput" type="text">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                        <span class="sr-only">Toggle Calendar</span>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
                                        <div class="datepicker-calendar">
                                            <div class="datepicker-calendar-header">
                                                <button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
                                                <button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
                                                <button type="button" class="title" data-month="4" data-year="2015">
                                                    <span class="month">
                                                        <span data-month="0">January</span>
                                                        <span data-month="1">February</span>
                                                        <span data-month="2">March</span>
                                                        <span data-month="3">April</span>
                                                        <span data-month="4" class="current">May</span>
                                                        <span data-month="5">June</span>
                                                        <span data-month="6">July</span>
                                                        <span data-month="7">August</span>
                                                        <span data-month="8">September</span>
                                                        <span data-month="9">October</span>
                                                        <span data-month="10">November</span>
                                                        <span data-month="11">December</span>
                                                    </span> <span class="year">2015</span>
                                                </button>
                                            </div>
                                            <table class="datepicker-calendar-days">
                                                <thead>
                                                    <tr>
                                                        <th>Su</th>
                                                        <th>Mo</th>
                                                        <th>Tu</th>
                                                        <th>We</th>
                                                        <th>Th</th>
                                                        <th>Fr</th>
                                                        <th>Sa</th>
                                                    </tr>
                                                </thead>
                                                <tbody><tr><td class="last-month first past restricted" data-date="26" data-month="3" data-year="2015" title="Restricted"><span><b class="datepicker-date">26</b></span></td><td class="last-month past restricted" data-date="27" data-month="3" data-year="2015" title="Restricted"><span><b class="datepicker-date">27</b></span></td><td class="last-month past restricted" data-date="28" data-month="3" data-year="2015" title="Restricted"><span><b class="datepicker-date">28</b></span></td><td class="last-month past restricted" data-date="29" data-month="3" data-year="2015" title="Restricted"><span><b class="datepicker-date">29</b></span></td><td class="last-month past restricted last" data-date="30" data-month="3" data-year="2015" title="Restricted"><span><b class="datepicker-date">30</b></span></td><td data-date="1" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">1</b></span></td><td data-date="2" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">2</b></span></td></tr><tr><td data-date="3" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">3</b></span></td><td data-date="4" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">4</b></span></td><td data-date="5" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">5</b></span></td><td data-date="6" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">6</b></span></td><td data-date="7" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">7</b></span></td><td data-date="8" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">8</b></span></td><td data-date="9" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">9</b></span></td></tr><tr><td data-date="10" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">10</b></span></td><td data-date="11" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">11</b></span></td><td data-date="12" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">12</b></span></td><td data-date="13" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">13</b></span></td><td data-date="14" data-month="4" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">14</b></span></td><td data-date="15" data-month="4" data-year="2015" class="current-day selected"><span><button type="button" class="datepicker-date">15</button></span></td><td data-date="16" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">16</button></span></td></tr><tr><td data-date="17" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">17</button></span></td><td data-date="18" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">18</button></span></td><td data-date="19" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">19</button></span></td><td data-date="20" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">20</button></span></td><td data-date="21" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">21</button></span></td><td data-date="22" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">22</button></span></td><td data-date="23" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">23</button></span></td></tr><tr><td data-date="24" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">24</button></span></td><td data-date="25" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">25</button></span></td><td data-date="26" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">26</button></span></td><td data-date="27" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">27</button></span></td><td data-date="28" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">28</button></span></td><td data-date="29" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">29</button></span></td><td data-date="30" data-month="4" data-year="2015"><span><button type="button" class="datepicker-date">30</button></span></td></tr><tr><td data-date="31" data-month="4" data-year="2015" class="last"><span><button type="button" class="datepicker-date">31</button></span></td><td class="next-month first" data-date="1" data-month="5" data-year="2015"><span><button type="button" class="datepicker-date">1</button></span></td><td class="next-month" data-date="2" data-month="5" data-year="2015"><span><button type="button" class="datepicker-date">2</button></span></td><td class="next-month" data-date="3" data-month="5" data-year="2015"><span><button type="button" class="datepicker-date">3</button></span></td><td class="next-month" data-date="4" data-month="5" data-year="2015"><span><button type="button" class="datepicker-date">4</button></span></td><td class="next-month" data-date="5" data-month="5" data-year="2015"><span><button type="button" class="datepicker-date">5</button></span></td><td class="next-month last" data-date="6" data-month="5" data-year="2015"><span><button type="button" class="datepicker-date">6</button></span></td></tr></tbody>
                                            </table>
                                            <div class="datepicker-calendar-footer">
                                                <button type="button" class="datepicker-today">Today</button>
                                            </div>
                                        </div>
                                        <div class="datepicker-wheels" aria-hidden="true">
                                            <div class="datepicker-wheels-month">
                                                <h2 class="header">Month</h2>
                                                <ul>
                                                    <li data-month="0"><button type="button">Jan</button></li>
                                                    <li data-month="1"><button type="button">Feb</button></li>
                                                    <li data-month="2"><button type="button">Mar</button></li>
                                                    <li data-month="3"><button type="button">Apr</button></li>
                                                    <li data-month="4"><button type="button">May</button></li>
                                                    <li data-month="5"><button type="button">Jun</button></li>
                                                    <li data-month="6"><button type="button">Jul</button></li>
                                                    <li data-month="7"><button type="button">Aug</button></li>
                                                    <li data-month="8"><button type="button">Sep</button></li>
                                                    <li data-month="9"><button type="button">Oct</button></li>
                                                    <li data-month="10"><button type="button">Nov</button></li>
                                                    <li data-month="11"><button type="button">Dec</button></li>
                                                </ul>
                                            </div>
                                            <div class="datepicker-wheels-year">
                                                <h2 class="header">Year</h2>
                                                <ul></ul>
                                            </div>
                                            <div class="datepicker-wheels-footer clearfix">
                                                <button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
                                                <button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="btn-group selectlist repeater-filters" data-resize="auto">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span class="selected-label">&nbsp;</span>
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Filters</span>
                    </button>
                    <ul class="dropdown-menu pull-right" role="menu">
                        <li data-value="all" data-selected="true"><a href="#">all</a></li>
                        <li data-value="draft"><a href="#">draft</a></li>
                        <li data-value="archived"><a href="#">archived</a></li>
                        <li data-value="active"><a href="#">active</a></li>
                    </ul>
                    <input class="hidden hidden-field" name="filterSelection" id="selector_grey" readonly="readonly" aria-hidden="true" type="text"/>
                </div>

                <div class="btn-group repeater-views" data-toggle="buttons">
                    <label class="btn btn-default active">
                        <input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
                    </label>
                    <label class="btn btn-default">
                        <input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
                    </label>
                </div>
            </div>
        </div>
        <div class="repeater-viewport">
            <div class="repeater-canvas"></div>
            <div class="loader repeater-loader"></div>
        </div>
        <div class="repeater-footer">
            <div class="repeater-footer-left">
                <div class="repeater-itemization">
                    <span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
                    <div class="btn-group selectlist dropup" data-resize="auto">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="selected-label">&nbsp;</span>
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li data-value="5"><a href="#">5</a></li>
                            <li data-value="10" data-selected="true"><a href="#">10</a></li>
                            <li data-value="20"><a href="#">20</a></li>
                        </ul>
                        <input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
                    </div>
                    <span>Per Page</span>
                </div>
            </div>
            <div class="repeater-footer-right">
                <div class="repeater-pagination">
                    <button type="button" class="btn btn-default btn-sm repeater-prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous Page</span>
                    </button>
                    <label class="page-label" id="myPageLabel">Page</label>
                    <div class="repeater-primaryPaging active">
                        <div class="input-group input-append dropdown combobox dropup">
                            <input type="text" class="form-control" aria-labelledby="myPageLabel">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right"></ul>
                            </div>
                        </div>
                    </div>
                    <input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel">
                    <span>of <span class="repeater-pages"></span></span>
                    <button type="button" class="btn btn-default btn-sm repeater-next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next Page</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

JS：

$('#myDatepicker').datepicker({
            allowPastDates: true,
            momentConfig: {
                culture: 'es',
                format: 'DD-MM-YYYY'
            },
            restricted: [
                {from: '01-01-2013', to: '01-01-2014'}
            ]
        });

        $(function () {
            // define the columns in your datasource
            var columns = [
                {
                    label: 'Name & Description',
                    property: 'name',
                    sortable: true
                },
                {
                    label: 'Key',
                    property: 'key',
                    sortable: true
                },
                {
                    label: 'Status',
                    property: 'status',
                    sortable: true
                }
            ];

            var items = [{"id": 1, "name": "item 1", "key": "desc 1", "status": "active", "category": "category2"},
                {"id": 2, "name": "item 2", "key": "desc 2", "status": "active", "category": "category2"},
                {"id": 3, "name": "item 3", "key": "desc 3", "status": "inac", "category": "category2"},
                {"id": 4, "name": "item 4", "key": "desc 4", "status": "inac", "category": "category5"},
                {"id": 5, "name": "item 5", "key": "desc 5", "status": "inac", "category": "category5"}
            ];

            function customColumnRenderer(helpers, callback) {
                // determine what column is being rendered
                var column = helpers.columnAttr;

                // get all the data for the entire row
                var rowData = helpers.rowData;
                var customMarkup = '';

                // only override the output for specific columns.
                // will default to output the text value of the row item
                switch (column) {
                    case 'name':
                        // let's combine name and description into a single column
                        customMarkup = '<div style="font-size:12px;">' + rowData.name + '</div><div class="small text-muted">' + rowData.description + '</div>';
                        break;
                    default:
                        // otherwise, just use the existing text value
                        customMarkup = helpers.item.text();
                        break;
                }

                helpers.item.html(customMarkup);

                callback();
            }

            function customRowRenderer(helpers, callback) {
                // let's get the id and add it to the "tr" DOM element
                var item = helpers.item;
                item.attr('id', 'row' + helpers.rowData.id);

                callback();
            }

            // this example uses a static datasource and
            // underscore is used to filter, sort, search, etc.
            function customDataSource(options, callback) {
                console.log("Imprimiendo FILTER:", options.filter);
                console.log("Imprimiendo SEARCH:", options.search);

                var pageIndex = options.pageIndex;
                var pageSize = options.pageSize;

                var data = items;

                // sort by
                data = _.sortBy(data, function (item) {
                    return item[options.sortProperty];
                });

                // sort direction
                if (options.sortDirection === 'desc') {
                    data = data.reverse();
                }

                // filter
                if (options.filter && options.filter.value !== 'all') {
                    data = _.filter(data, function (item) {
                        return item.status === options.filter.value;
                    });
                }

                // search
                if (options.search && options.search.length > 0) {
                    var searchedData = [];
                    var searchTerm = options.search.toLowerCase();

                    _.each(data, function (item) {
                        var values = _.values(item);
                        var found = _.find(values, function (val) {

                            if (val.toString().toLowerCase().indexOf(searchTerm) > -1) {
                                searchedData.push(item);
                                return true;
                            }
                        });
                    });

                    data = searchedData;
                }

                var totalItems = data.length;
                var totalPages = Math.ceil(totalItems / pageSize);
                var startIndex = (pageIndex * pageSize) + 1;
                var endIndex = (startIndex + pageSize) - 1;
                if (endIndex > data.length) {
                    endIndex = data.length;
                }

                data = data.slice(startIndex - 1, endIndex);

                var dataSource = {
                    page: pageIndex,
                    pages: totalPages,
                    count: totalItems,
                    start: startIndex,
                    end: endIndex,
                    columns: columns,
                    items: data
                };

                callback(dataSource);
            }

            // initialize the repeater
            var repeater = $('#myRepeater');
            repeater.repeater({
                list_selectable: false, // (single | multi)
                list_noItemsHTML: 'nothing to see here... move along',
                // override the column output via a custom renderer.
                // this will allow you to output custom markup for each column.
                list_columnRendered: customColumnRenderer,
                // override the row output via a custom renderer.
                // this example will use this to add an "id" attribute to each row.
                list_rowRendered: customRowRenderer,
                // setup your custom datasource to handle data retrieval;
                // responsible for any paging, sorting, filtering, searching logic
                dataSource: customDataSource
            });
        });


        $('#myDatepicker').on('dateClicked.fu.datepicker', function (evt, date) {
            console.log("dateClicked.fu.datepicker");
        });

Answer 1

我想你想要这样的东西：

$('#myDatepicker').on('dateClicked.fu.datepicker', function (evt, date) {
    $('#myRepeater').repeater('render', {
        dataSourceOptions: {
            filter: {
                text: datetoDateString(), 
                value: date
            } 
       }
   );
});

Render 可用于更改转发器的选项，其中包括 dataSourceOptions 对象，这将允许您从外部事件中操作 dataSource。

Answer 2

我使用您建议的代码，它不会发送数据“options.filter”。另外使用以下代码：

$('#date').on('change', function () {
    var date = $(this).val();
    var options = {
        fecha:date                     
    };
    // pass your custom options to the repeater and re-render
    // in this case, we're passing the selected date
    $('#myRepeater').repeater('render', {
        dataSourceOptions: options,
        preserveDataSourceOptions: true
    });
});

假设当datepicker发生变化时，必须发送变量“options.fecha”，但没有发送一些移动。变量“options.fecha”未定义。不知道是变量作用域的问题还是没有渲染repeater。

我也搬家了，仍然无法识别变量“options.fecha”。

Answer 3

<!DOCTYPE html>
<html class="fuelux">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Snippets</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- dependencies -->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="//www.fuelcdn.com/fuelux/3.1.0/css/fuelux.min.css" rel="stylesheet"/>
        <link href="//www.fuelcdn.com/fuelux-mctheme/1.1.0/css/fuelux-mctheme.min.css" rel="stylesheet"/>

    </head>
    <body class="fuelux">
        <div class="repeater" id="myRepeater" data-staticheight="true" style="position:absolute; top:25px; right:25px; bottom:25px; left:25px;">
            <div class="repeater-header">
                <div class="repeater-header-left">
                    <span class="repeater-title">Repeater</span>
                    <div class="repeater-search">
                        <div class="search input-group">
                            <input type="search" class="form-control" placeholder="Search"/>
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <span class="glyphicon glyphicon-search"></span>
                                    <span class="sr-only">Search</span>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="repeater-header-right">
                    <input id="date" type="date">
                    <div class="btn-group selectlist repeater-filters" data-resize="auto">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="selected-label">&nbsp;</span>
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Filters</span>
                        </button>
                        <ul class="dropdown-menu pull-right" role="menu">
                            <li data-value="all" data-selected="true"><a href="#">all</a></li>
                            <li data-value="draft"><a href="#">draft</a></li>
                            <li data-value="archived"><a href="#">archived</a></li>
                            <li data-value="active"><a href="#">active</a></li>
                        </ul>
                        <input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
                    </div>
                    <div class="btn-group repeater-views" data-toggle="buttons">
                        <label class="btn btn-default active">
                            <input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
                        </label>
                        <label class="btn btn-default">
                            <input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="repeater-viewport">
                <div class="repeater-canvas"></div>
                <div class="loader repeater-loader"></div>
            </div>
            <div class="repeater-footer">
                <div class="repeater-footer-left">
                    <div class="repeater-itemization">
                        <span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
                        <div class="btn-group selectlist dropup" data-resize="auto">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="selected-label">&nbsp;</span>
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li data-value="5"><a href="#">5</a></li>
                                <li data-value="10" data-selected="true"><a href="#">10</a></li>
                                <li data-value="20"><a href="#">20</a></li>
                            </ul>
                            <input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
                        </div>
                        <span>Per Page</span>
                    </div>
                </div>
                <div class="repeater-footer-right">
                    <div class="repeater-pagination">
                        <button type="button" class="btn btn-default btn-sm repeater-prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            <span class="sr-only">Previous Page</span>
                        </button>
                        <label class="page-label" id="myPageLabel">Page</label>
                        <div class="repeater-primaryPaging active">
                            <div class="input-group input-append dropdown combobox dropup">
                                <input type="text" class="form-control" aria-labelledby="myPageLabel">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right"></ul>
                                </div>
                            </div>
                        </div>
                        <input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel">
                        <span>of <span class="repeater-pages"></span></span>
                        <button type="button" class="btn btn-default btn-sm repeater-next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span class="sr-only">Next Page</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>


        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="//www.fuelcdn.com/fuelux/3.2.0/js/fuelux.min.js"></script>
        <!--<script src="//www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>-->
        <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>

        <script>
            $(function () {
                // define the columns in your datasource
                var columns = [
                    {
                        label: 'Name &amp; Description',
                        property: 'name',
                        sortable: true
                    },
                    {
                        label: 'Key',
                        property: 'key',
                        sortable: true
                    },
                    {
                        label: 'Status',
                        property: 'status',
                        sortable: true
                    }
                ];
                var items = [{"id": 1, "name": "item 1", "key": "desc 1", "status": "active", "category": "category2"},
                    {"id": 2, "name": "item 2", "key": "desc 2", "status": "active", "category": "category2"},
                    {"id": 3, "name": "item 3", "key": "desc 3", "status": "inac", "category": "category2"},
                    {"id": 4, "name": "item 4", "key": "desc 4", "status": "inac", "category": "category5"},
                    {"id": 5, "name": "item 5", "key": "desc 5", "status": "inac", "category": "category5"}
                ];

                function customColumnRenderer(helpers, callback) {
                    // determine what column is being rendered
                    var column = helpers.columnAttr;

                    // get all the data for the entire row
                    var rowData = helpers.rowData;
                    var customMarkup = '';

                    // only override the output for specific columns.
                    // will default to output the text value of the row item
                    switch (column) {
                        case 'name':
                            // let's combine name and description into a single column
                            customMarkup = '<div style="font-size:12px;">' + rowData.name + '</div><div class="small text-muted">' + rowData.description + '</div>';
                            break;
                        default:
                            // otherwise, just use the existing text value
                            customMarkup = helpers.item.text();
                            break;
                    }

                    helpers.item.html(customMarkup);

                    callback();
                }

                function customRowRenderer(helpers, callback) {
                    // let's get the id and add it to the "tr" DOM element
                    var item = helpers.item;
                    item.attr('id', 'row' + helpers.rowData.id);

                    callback();
                }

                // this example uses a static datasource and
                // underscore is used to filter, sort, search, etc.
                function customDataSource(options, callback) {
                    console.log(options);
                    var pageIndex = options.pageIndex;
                    var pageSize = options.pageSize;

                    var data = items;

                    // sort by
                    data = _.sortBy(data, function (item) {
                        return item[options.sortProperty];
                    });

                    // sort direction
                    if (options.sortDirection === 'desc') {
                        data = data.reverse();
                    }

                    // filter
                    if (options.filter && options.filter.value !== 'all') {
                        data = _.filter(data, function (item) {
                            return item.status === options.filter.value;
                        });
                    }

                    // search
                    if (options.search && options.search.length > 0) {
                        var searchedData = [];
                        var searchTerm = options.search.toLowerCase();

                        _.each(data, function (item) {
                            var values = _.values(item);
                            var found = _.find(values, function (val) {

                                if (val.toString().toLowerCase().indexOf(searchTerm) > -1) {
                                    searchedData.push(item);
                                    return true;
                                }
                            });
                        });

                        data = searchedData;
                    }

                    var totalItems = data.length;
                    var totalPages = Math.ceil(totalItems / pageSize);
                    var startIndex = (pageIndex * pageSize) + 1;
                    var endIndex = (startIndex + pageSize) - 1;
                    if (endIndex > data.length) {
                        endIndex = data.length;
                    }

                    data = data.slice(startIndex - 1, endIndex);

                    var dataSource = {
                        page: pageIndex,
                        pages: totalPages,
                        count: totalItems,
                        start: startIndex,
                        end: endIndex,
                        columns: columns,
                        items: data
                    };

                    callback(dataSource);
                }

                // initialize the repeater
                var repeater = $('#myRepeater');
                repeater.repeater({
                    list_selectable: false, // (single | multi)
                    list_noItemsHTML: 'nothing to see here... move along',
                    // override the column output via a custom renderer.
                    // this will allow you to output custom markup for each column.
                    list_columnRendered: customColumnRenderer,
                    // override the row output via a custom renderer.
                    // this example will use this to add an "id" attribute to each row.
                    list_rowRendered: customRowRenderer,
                    // setup your custom datasource to handle data retrieval;
                    // responsible for any paging, sorting, filtering, searching logic
                    dataSource: customDataSource
                });
            });

            // handle date change
            $('#date').on('change', function () {
                //console.log("CAPTO EL CAMBIO");
                var date = $(this).val();
                console.log("Fecha Captada:", date);
                var options = {
                    fecha:date                     
                };
                // pass your custom options to the repeater and re-render
                // in this case, we're passing the selected date
                $('#myRepeater').repeater('render', {
                    dataSourceOptions: options,
                    preserveDataSourceOptions: true
                });
            });
        </script>

    </body>
</html>

由于某种原因没有将数据发送到过滤器。 我可以获取日期选择器的日期，但无法发送变量“options.fecha”来过滤它。