Я ищу беспрепятственный способ разбиения данных на страницы с помощью JQuery и Ajax на веб-сайте ASP.net.
Я пытаюсь заставить его работать подобно этому , но это не работает, потому что в javascript что-то не так, но я не могу найти, как это исправить. На самом деле мне пока не нравятся результаты, слишком сложно поддерживать этот код, не правда ли?
Вопрос: есть ли способ сделать то же самое без помех, используя JQuery и Ajax для ASP.NET?
Ниже я делюсь некоторым кодом:
У меня есть код WebMethod на странице aspx для доставки образцов данных:
[WebMethod]
public static string GetEmployees(int pageIndex)
{
JavaScriptSerializer serial = new JavaScriptSerializer();
StringBuilder sb = new StringBuilder("[");
serial.Serialize(new { Id = 1, Name = "Fred G. Aandahl" }, sb); sb.Append(",");
serial.Serialize(new { Id = 2, Name = "Watkins Moorman Abbitt" }, sb); sb.Append(",");
serial.Serialize(new { Id = 3, Name = "Amos Abbott" }, sb); sb.Append(",");
serial.Serialize(new { Id = 4, Name = "Jo Abbott" }, sb); sb.Append(",");
//more lines here...
sb.Append("]");
return sb.ToString();
}
вот страница ASPX:
<!-- Handle pagination -->
<script type="text/javascript" src="default.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>Members<br/>
<div id="Pagination" class="pagination"></div>
<br style="clear:both;" />
<div id="container">
<table id="Searchresult" cellspacing="1" cellpadding="0" border="0">
<tr>
<th>Id</th><th>Name</th>
</tr>
<tr>
<td>0</td><td>Sample</td>
</tr>
</table>
</div>
</div>
</form>
<form name="paginationoptions">
<p><label for="items_per_page">Items</label><input type="text" value="5" name="items_per_page" id="items_per_page" class="numeric"/></p>
<p><label for="num_display_entries">Total links</label><input type="text" value="10" name="num_display_entries" id="num_display_entries" class="numeric"/></p>
<p><label for="num">Start /End point</label><input type="text" value="2" name="num_edge_entries" id="num_edge_entries" class="numeric"/></p>
<p><label for="prev_text">Previous label</label><input type="text" value="Prev" name="prev_text" id="prev_text"/></p>
<p><label for="next_text">Next label</label><input type="text" value="Next" name="next_text" id="next_text"/></p>
<input type="button" id="setoptions" value="Aceptar" />
</form>
default.js
// This file demonstrates the different options of the pagination plugin
// It also demonstrates how to use a JavaScript data structure to
// generate the paginated content and how to display more than one
// item per page with items_per_page.
var emps;
/**
* Callback function that displays the content.
*
* Gets called every time the user clicks on a pagination link.
*
* @param {int}page_index New Page index
* @param {jQuery} jq the container with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq) {
//read data for pagination from webmethod GetEmployees
var data = '{"pageIndex":' + page_index + '}';
$.ajax({ type: 'Post',
url: 'Default.aspx/GetEmployees',
data: data,
contentType: "application/json;charset=utf-8",
dataType: 'json',
success: function(msg) {
emps = eval(msg.d);
$.each($('#Searchresult tr:gt(0)'), function(i, n) {
$('#Searchresult')[0].deleteRow(n.rowIndex);
});
// Get number of elements per pagionation page from form
var items_per_page = $('#items_per_page').val();
var max_elem = Math.min((page_index + 1) * items_per_page, emps.length);
var newcontent = '';
for (var i = page_index * items_per_page; i < max_elem; i++) {
var emp = emps[i];
newcontent += '<tr><td>' + emp.Id + '</td><td>' + emp.Name + '</td></tr>';
}
// Replace old content with new content
$('#Searchresult').html(newcontent);
//can't make it work
//var optInit = { callback: pageselectCallback }; // getOptionsFromForm();
//$("#Pagination").pagination(emps != null ? emps.length : 0, optInit);
},
error: function(msg) {
alert("error:" + msg.statusText);
}
});
// Prevent click eventpropagation
return true;}
// The form contains fields for many pagiantion optiosn so you can
// quickly see the resuluts of the different options.
// This function creates an option object for the pagination function.
// This will be be unnecessary in your application where you just set
// the options once.
function getOptionsFromForm() {
var opt = { callback: pageselectCallback };
// Collect options from the text fields - the fields are named like their option counterparts
$("input:text").each(function() {
opt[this.name] = this.className.match(/numeric/) ? parseInt(this.value) : this.value;
});
// Avoid html injections in this demo
var htmlspecialchars = { "&": "&", "<": "<", ">": ">", '"': """ }
$.each(htmlspecialchars, function(k, v) {
opt.prev_text = opt.prev_text.replace(k, v);
opt.next_text = opt.next_text.replace(k, v);
})
return opt;
}
// When document has loaded, initialize pagination and form
$(document).ready(function() {
// Create pagination element with options from form
var optInit = getOptionsFromForm();
$("#Pagination").pagination(emps!=null?emps.length:0, optInit);
// Event Handler for for button
$("#setoptions").click(function() {
var opt = getOptionsFromForm();
// Re-create pagination content with new parameters
$("#Pagination").pagination(emps != null ? emps.length : 0, opt);
});
});