Упорядочить по дате с помощью Ajax jQuery

Question

У меня есть <li> с возможностью перетаскивать каждый элемент, чтобы изменить их порядок и сохранить новый ранг в DB

, вот код:

$(document).ready(function () {

    $('#reorder').sortable({
        opacity: 0.6, 
        data:$(this).sortable("serialize"),
        cursor: 'move', 
        tolerance: 'pointer', 
        revert: true, 
        placeholder: 'state', 
        forcePlaceholderSize: true,
        update: function(e, ui){
            newRank = $(this).sortable("serialize");
                console.log(newRank);
                $.ajax({
                url: base_url + "/admin/rank/",
                type: "POST",
                data: newRank,
                complete: function(success){
                     $("#message").html('<span class="success">file ordered</span>'); 
                },
                error: function(error){
                     $("#message").html('<span class="success">file not ordered</span>');
                }
                });
        }
    });

});

Затем вызовитеконтроллер:

function save_rank()
{
    $items = $this->input->post('item');
    $total_items = count($this->input->post('item'));

    for($item = 0; $item < $total_items; $item++ )
        {

        $data = array(
            'project_id' => $items[$item],
            'rank' => $item
        );

        $this->db->where('project_id', $data['project_id']);
        $this->db->update('ft_projects', $data);
    } 
}

Это хорошо работает и переупорядочивает мои элементы по их рангу (в БД у меня есть столбец с именем RANK, в котором указаны позиции каждого элемента)

Но теперь я хотел бы сделать кнопку, чтобы ЗАПИСАТЬ элементы по ДАТЕ (они также хранятся в БД), поэтому фактически измените RANK COLUMN, чтобы элементы сортировались по DATE вместо фактического ранга (сделанного, например, пользователем).)

Answer 1

Чтобы изменить порядок ваших li s, вам просто нужно detach их и заново вставить (append) в родительский элемент снова. Если даты находятся в вашей БД, вам нужно будет выполнить вызов ajax, чтобы получить их при нажатии кнопки REORDER, и в обратном вызове выполнить следующие операции:

1. отделяется каждые li;
2. перебирает ваши ajax-данные, обнаруживая, что li соответствует отсортированному элементу;
3. добавить его обратно.

Хотя лучше кэшировать эту информацию о дате, ИМХО, поэтому задержка между «нажатием кнопки» и «переупорядочением элементов» не будет слишком большой. Если вы хотите сохранить дополнительные данные в элементе, но не отображать их, вы можете использовать функцию jQuery data .