Sortable listview items with autodividers

by Omar X

HTML

<div data-role="page" id="ScheduleDay" data-theme="b">
    <div data-role="header">	<a href="#HomePage" data-icon="home" data-direction="reverse" data-iconpos="notext">Home</a>	
         <h1 id="ScheduleDayText">Schedule</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" id="ScheduleList" data-autodividers="true" data-inset="true" data-divider-theme="e" data-theme="c">
            <li data-time="03:30PM"><a href="#">Event 1</a>

            </li>
            <li data-time="03:30PM"><a href="#">Event 2</a>

            </li>
            <li data-time="04:30PM"><a href="#">Event 3</a>

            </li>
            <li data-time="03:30PM"><a href="#">Event 4</a>

            </li>
            <li data-time="03:30PM"><a href="#">Event 5</a>

            </li>
            <li data-time="04:30PM"><a href="#">Event 6</a>

            </li>
            <li data-time="06:30PM"><a href="#">Event 7</a>

            </li>
            <li data-time="02:10PM"><a href="#">Event 8</a>

            </li>
            <li data-time="01:50PM"><a href="#">Event 9</a>

            </li>
            <li data-time="10:30PM"><a href="#">Event 10</a>

            </li>
            <li data-time="10:30PM"><a href="#">Event 11</a>

            </li>
            <li data-time="01:50PM"><a href="#">Event 12</a>

            </li>
        </ul>
    </div>
</div>

JavaScript

$(document).on("pageinit", "#ScheduleDay", function () {
    // Sort items
    var listview = $('#ScheduleList'),
        listitems = listview.children('li');

    listitems.detach().sort(function (a, b) {
        var adata = $(a).data('time');
        var bdata = $(b).data('time');
        return (adata > bdata) ? 1 : -1;
    });

    listview.append(listitems);

    // Apply auto dividers
    $("#ScheduleList").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.jqmData('time');
            return out;
        }
    }).listview('refresh');
});