Как разбить загруженные данные на ajax? - PullRequest
Новая
       2

Как разбить загруженные данные на ajax?

2 голосов
/ 16 ноября 2011

Я загружаю данные из формы, используя сообщение JQuery. 

$("#SortItmesForm").submit(function() {
    $.post("filtItems.php",
        $("#FiltItemsForm").serialize(),
        function(data) {
            /*alert(data);*/
            $('#results').html(data);
        }
    );
    return false; //Code after form submitted
});

FiltItems.php выводится на 

<div id="results"></div>

выглядит следующим образом. 

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

Может кто-нибудь дать мне несколько советов, как разбивать загруженные результаты на страницы. Желательно с JQuery.

Я перепробовал много плагинов JQuery, но ни один из них не работал с данными, загруженными ajax.

1 Ответ

1 голос
/ 16 ноября 2011

Естественно, ваш CSS также будет важен в этом случае.Предположим, вы хотите, чтобы каждый li отображался в виде страницы. 

<ul id="list_container">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<a href="javascript:paginate.move('left');">&lt;</a> | <a href="javascript:paginate.move('right');">&gt;</a>

css: 

#results{
    width:200px;
    height:200px;
    overflow:hidden;
}

#list_container{
    width:600px;
    margin-left:0px;
}

#list_container li{
    width:200px;
    float:left;
}

js: 

var paginate = {
    cur_offset: 0,
    move: function move(dir)
    {
        if(dir == 'left')
        {
            paginate.cur_offset -= 200;
            $('#list_container').animate({marginLeft: paginate.cur_offset + 'px'}, 1000);
        }
        else
        {
            paginate.cur_offset += 200;
            $('#list_container').animate({marginLeft: paginate.cur_offset + 'px'}, 1000);
        }
    }
};

Очевидно, вы захотите сделать условияпоэтому, если вы находитесь на странице 1, вы отключаете стрелку влево, а последнюю страницу отключаете правую, но с этим легко справиться.

Существует также вероятность того, что я неправильно понял ваш вопрос.Если у вас возникла проблема с отображением в браузере результатов вашего ajax-вызова, вероятно, вам нужно установить элементы dom следующим образом: 

var elem = $('<div>');
elem.attr('id', some_id);
elem.html(data.html); // assuming you pass json, if not then just data
$('#results').append(elem);

А также посмотрите на jquery .liveесли некоторые функции не работают с вновь созданными элементами dom.

Что касается плагинов - это довольно расплывчато.Я не знаю плагина «pagination» для jquery, потому что нумерация страниц довольно проста.Мне никогда не приходилось искать основной плагин.

Если этот ответ полезен, но требует дополнительной информации, дайте мне знать, и я обновлю, если это возможно.

...