Хороший плагин jQuery для разбивки на страницы для использования с данными JSON - PullRequest
Новая
       65

Хороший плагин jQuery для разбивки на страницы для использования с данными JSON

9 голосов
/ 24 марта 2010

Я ищу хороший плагин jQuery для разбивки на страницы на моей странице aspx.

У меня есть следующие параметры. currentpage, pagesize, TotalRecords, NumberofPages. Я хотел бы, чтобы мой плагин делал то же самое, что и Stack Overflow paging.

EDIT: Он должен разбиваться на страницы в формате JSON.

Аналогично этому,

пейджер http://img98.imageshack.us/img98/7278/pagersy.jpg

Я использую свои данные JSON и выполняю итерации с помощью jQuery 

var jsonObj = jQuery.parseJSON(HfJsonValue);
    for (var i = jsonObj.Table.length - 1; i >= 0; i--) {
        var employee = jsonObj.Table[i];
        $('<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>').insertAfter('#ResultsDiv');
    }

На моей странице 25 дел. В результате, как мне показать первые пять делений на странице 1 и так далее?

My HfJsonValue содержит следующие данные json 

{
    "Table": [{
        "Emp_Id": "3",
        "Identity_No": "",
        "Emp_Name": "Jerome",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Supervisior",
        "Desig_Description": "Supervisior of the Construction",
        "SalaryBasis": "Monthly",
        "FixedSalary": "25000.00"
    }, {
        "Emp_Id": "4",
        "Identity_No": "",
        "Emp_Name": "Mohan",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Acc ",
        "Desig_Description": "Accountant",
        "SalaryBasis": "Monthly",
        "FixedSalary": "200.00"
    }, {
        "Emp_Id": "5",
        "Identity_No": "",
        "Emp_Name": "Murugan",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Mason",
        "Desig_Description": "Mason",
        "SalaryBasis": "Weekly",
        "FixedSalary": "150.00"
    }, {
        "Emp_Id": "6",
        "Identity_No": "",
        "Emp_Name": "Ram",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Mason",
        "Desig_Description": "Mason",
        "SalaryBasis": "Weekly",
        "FixedSalary": "120.00"
    }, {
        "Emp_Id": "7",
        "Identity_No": "",
        "Emp_Name": "Raja",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Mason",
        "Desig_Description": "Mason",
        "SalaryBasis": "Weekly",
        "FixedSalary": "135.00"
    }, {
        "Emp_Id": "8",
        "Identity_No": "",
        "Emp_Name": "Raja kumar",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Mason Helper",
        "Desig_Description": "Mason Helper",
        "SalaryBasis": "Weekly",
        "FixedSalary": "105.00"
    }, {
        "Emp_Id": "9",
        "Identity_No": "",
        "Emp_Name": "Lakshmi",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Mason Helper",
        "Desig_Description": "Mason Helper",
        "SalaryBasis": "Weekly",
        "FixedSalary": "100.00"
    }, {
        "Emp_Id": "10",
        "Identity_No": "",
        "Emp_Name": "Palani",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Carpenter",
        "Desig_Description": "Carpenter",
        "SalaryBasis": "Weekly",
        "FixedSalary": "200.00"
    }, {
        "Emp_Id": "11",
        "Identity_No": "",
        "Emp_Name": "Annamalai",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Carpenter",
        "Desig_Description": "Carpenter",
        "SalaryBasis": "Weekly",
        "FixedSalary": "220.00"
    }, {
        "Emp_Id": "12",
        "Identity_No": "",
        "Emp_Name": "David",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Steel Fixer",
        "Desig_Description": "Steel Fixer",
        "SalaryBasis": "Weekly",
        "FixedSalary": "220.00"
    }, {
        "Emp_Id": "13",
        "Identity_No": "",
        "Emp_Name": "Chandru",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Steel Fixer",
        "Desig_Description": "Steel Fixer",
        "SalaryBasis": "Weekly",
        "FixedSalary": "220.00"
    }, {
        "Emp_Id": "14",
        "Identity_No": "",
        "Emp_Name": "Mani",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Steel Helper",
        "Desig_Description": "Steel Helper",
        "SalaryBasis": "Weekly",
        "FixedSalary": "175.00"
    }, {
        "Emp_Id": "15",
        "Identity_No": "",
        "Emp_Name": "Karthik",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Wood Fixer",
        "Desig_Description": "Wood Fixer",
        "SalaryBasis": "Weekly",
        "FixedSalary": "195.00"
    }, {
        "Emp_Id": "16",
        "Identity_No": "",
        "Emp_Name": "Bala",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Wood Fixer",
        "Desig_Description": "Wood Fixer",
        "SalaryBasis": "Weekly",
        "FixedSalary": "185.00"
    }, {
        "Emp_Id": "17",
        "Identity_No": "",
        "Emp_Name": "Tamil arasi",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Wood Helper",
        "Desig_Description": "Wood Helper",
        "SalaryBasis": "Weekly",
        "FixedSalary": "185.00"
    }, {
        "Emp_Id": "18",
        "Identity_No": "",
        "Emp_Name": "Perumal",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Cook",
        "Desig_Description": "Cook",
        "SalaryBasis": "Weekly",
        "FixedSalary": "105.00"
    }, {
        "Emp_Id": "19",
        "Identity_No": "",
        "Emp_Name": "Andiappan",
        "Address": "Madurai",
        "Date_Of_Birth": "",
        "Desig_Name": "Watchman",
        "Desig_Description": "Watchman",
        "SalaryBasis": "Weekly",
        "FixedSalary": "150.00"
    }]
}

См. Дополнительные ответы на дубликаты этого вопроса:

Как использовать jQuery для разбивки на страницы данных JSON?

1 Ответ

11 голосов
/ 30 марта 2010

Повторяющийся вопрос, дубликат ответа ...

Вы можете использовать плагин jQuery Pagination:

http://d -scribe.de / WebTools / JQuery-пагинация / демо / demo_options.htm

(Загрузить здесь )

Вот один из нескольких способов использования плагина.

Шаг 1: Создайте разметку из ваших JSON-данных, как показано ниже: 

<div id="display">
    <!-- This is the div where the visible page will be displayed -->
</div>

<div id="hiddenData">
    <!-- This is the div where you output your records -->
    <div class="record">
        <!-- create one record-div for each record you have in your JSON data -->
    </div>
    <div class="record">
    </div>
</div>

Идея состоит в том, чтобы при нажатии ссылки на страницу скопировать соответствующую запись в экранный блок. Поэтому плагин предлагает функцию обратного вызова pageSelect. Шаг 2 - реализовать эту функцию, например: 

function pageselectCallback(pageIndex, jq) {
    // Clone the record that should be displayed
    var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone();
    // Update the display container
    $('#display').empty().append(newContent);
    return false;
}

Это будет означать, что у вас есть одна страница на запись. Если вы хотите отобразить несколько записей на странице, вы должны соответствующим образом изменить вышеуказанную функцию.

Третий и последний шаг - правильно инициализировать все это. 

function initPagination() {
    // Hide the records... they shouldn't be displayed
    $("#hiddenData").css("display", "none");
    // Get the number of records
    var numEntries = $('#hiddenData div.result').length;
    // Create pagination element
    $("#pagination").pagination(numEntries, {
        num_edge_entries: 2,
        num_display_entries: 8, // number of page links displayed 
        callback: pageselectCallback,
        items_per_page: 1  // Adjust this value if you change the callback!
    });
}

Итак, вам просто нужно сгенерировать разметку HTML из ваших данных JSON и впоследствии вызвать функцию init.

...