Я хочу реализовать разбиение на страницы на стороне сервера в таблице.Мне нужно знать, какой код писать в методе получения контроллера API и любой другой необходимый код.
Я пытался искать в Интернете, но не смог найти ни одного ресурса.И любой ресурс, который находится близко, имеет плохое объяснение.
Для примера того, что я хочу, пожалуйста, перейдите по следующей ссылке (только посмотрите на номера страниц):
https://datatables.net/
В основном я хочу, чтобы номера страниц были внизу, и когда вы нажимаете на них, страница меняется.
Насколько мне известно, что происходит, когда я отправляю HTTP-запрос в API с номером страницы, ограничение страницы вURL, он должен возвращать результаты с количеством результатов, равным пределу страницы, и в соответствии с номерами страниц он должен пропустить некоторые результаты.Также полученный json должен включать в себя количество страниц, чтобы я мог заполнить номера страниц под таблицей.
Это должно быть что-то вроде следующего, за исключением того, что следующее написано в node и использует mongo db.
https://codeforgeek.com/2019/03/server-side-pagination-using-node-and-mongo/
Я хочу использовать веб-API ядра ядра .net и SQL Server.
Текущий код:
Контроллер API
[Route("api/customer")]
public class CustomerController : Controller
{
private readonly InventoryDatabaseContext _context;
public CustomerController(InventoryDatabaseContext context)
{
_context = context;
}
GET: api/<controller>
[HttpGet]
public ActionResult<List<CustomerTable>> GetAll()
{
return _context.CustomerTable.ToList();
}
}
Модель
namespace API.Models
{
public partial class CustomerTable
{
public static List<CustomerTable> customer = new List<CustomerTable>();
[Key]
public int CustomerId { get; set; }
public string CustomerName { get; set; }
public string CustomerTelephone { get; set; }
public string CustomerAddress { get; set; }
public string CustomerEmail { get; set; }
}
}
HTML и JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<style>
.selected {
background-color: red;
}
</style>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2" type="button">Add</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="button" id="editbtn" onclick="editItem(rowid)">Edit</button>
<button class="btn btn-primary btn-lg" type="button" onclick="deleteItem(rowid)">Delete</button>
<div>
<table id="datatable" class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>Customer Name</th>
<th>Customer Telephone</th>
<th>Customer Address</th>
<th>Customer Email</th>
</tr>
</thead>
<tbody id="cus"></tbody>
</table>
<ul id="pagination-demo" class="pagination-lg pull-right"></ul>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form class="my-form">
<!--<input type="hidden" id="edit-id">-->
<input class="form-control" type="hidden" id="edit-id">
<div class="form-group row">
<label for="edit-name" class="col-2 col-form-label">Customer Name</label>
<div class="col-5">
<input class="form-control" type="text" id="edit-name" placeholder="Enter Customer Name">
</div>
</div>
<div class="form-group row">
<label for="edit-telephone" class="col-2 col-form-label">Customer Telephone</label>
<div class="col-5">
<input class="form-control" type="text" id="edit-telephone" placeholder="Enter Customer Telephone">
</div>
</div>
<div class="form-group row">
<label for="edit-address" class="col-2 col-form-label">Customer Address</label>
<div class="col-5">
<input class="form-control" type="text" id="edit-address" placeholder="Enter Customer Address">
</div>
</div>
<div class="form-group row">
<label for="edit-email" class="col-2 col-form-label">Customer Email</label>
<div class="col-5">
<input class="form-control" type="text" id="edit-email" placeholder="Enter Customer Email">
</div>
</div>
<!--<input type="submit" value="Edit">-->
<button type="button" class="btn btn-primary btn-lg" onclick="editcustomer()">Edit</button>
<!--<a onclick="closeInput()" aria-label="Close">✖</a>-->
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- The Modal2 -->
<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form>
<div class="form-group row">
<label for="add-name" class="col-2 col-form-label">Customer Name</label>
<div class="col-5">
<input class="form-control" type="text" id="add-name" placeholder="Enter Customer Name">
</div>
</div>
<div class="form-group row">
<label for="add-telephone" class="col-2 col-form-label">Customer Telephone</label>
<div class="col-5">
<input class="form-control" type="text" id="add-telephone" placeholder="Enter Customer Telephone">
</div>
</div>
<div class="form-group row">
<label for="add-address" class="col-2 col-form-label">Customer Address</label>
<div class="col-5">
<input class="form-control" type="text" id="add-address" placeholder="Enter Customer Address">
</div>
</div>
<div class="form-group row">
<label for="add-email" class="col-2 col-form-label">Customer Email</label>
<div class="col-5">
<input class="form-control" type="text" id="add-email" placeholder="Enter Customer Email">
</div>
</div>
<div class="form-group row">
<div class="col-2">
<button type="button" class="btn btn-primary btn-lg" onclick="addCustomer()">Add</button>
</div>
</div>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<input id="startDate" type="text" />
<script src="~/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://www.solodev.com/assets/pagination/jquery.twbsPagination.js"></script>
<script>
var editor;
let cus = null;
$(document).ready(function () {
getCustomer();
getrow();
highlightrow();
$("button[id=editbtn]").attr("disabled", "disabled");
$("#startDate").ejDatePicker();
$('#pagination-demo').twbsPagination({
totalPages: 5,
// the current page that show on start
startPage: 1,
// maximum visible pages
visiblePages: 5,
initiateStartPageClick: true,
// template for pagination links
href: false,
// variable name in href template for page number
hrefVariable: '{{number}}',
// Text labels
first: 'First',
prev: 'Previous',
next: 'Next',
last: 'Last',
// carousel-style pagination
loop: false,
// callback function
onPageClick: function (event, page) {
$('.page-active').removeClass('page-active');
$('#page' + page).addClass('page-active');
},
// pagination Classes
paginationClass: 'pagination',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first',
pageClass: 'page',
activeClass: 'active',
disabledClass: 'disabled'
});
});
$('#datatable').on('click', 'tr', function () {
$(this).addClass('info').siblings().removeClass('info');
$("button[id=editbtn]").removeAttr("disabled");
});
function highlightrow() {
}
function getCustomer() {
var json_url = 'https://localhost:44336/api/customer';
$.ajax({
url: json_url,
type: 'GET',
success: function (data) {
$('#cus').empty();
$.each(data, function (index, element) {
$('#cus').append('<tr id="high"><td style="display:none;">' + element.customerId + '</td>' +
'<td> ' + element.customerName + '</td > ' +
'<td>' + element.customerTelephone + '</td>' +
'<td>' + element.customerAddress + '</td>' +
'<td>' + element.customerEmail + '</td>'
);
});
cus = data;
}
});
}
var rowid;
function getrow() {
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
data.push(cells[0].innerHTML);
}
rowid = data
};
}
function addCustomer() {
uri = 'https://localhost:44336/api/customer';
var itemObj = {
'CustomerName': $('#add-name').val(),
'CustomerTelephone': $('#add-telephone').val(),
'CustomerAddress': $('#add-address').val(),
'CustomerEmail': $('#add-email').val()
};
$.ajax({
type: 'POST',
url: uri,
data: JSON.stringify(itemObj),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (result) {
getCustomer();
$('#add-name').val('');
$('#add-telephone').val('');
$('#add-address').val('');
$('#add-email').val('');
}
});
}
function deleteItem(rowid) {
uri = 'https://localhost:44336/api/customer';
$.ajax({
url: uri + '/' + rowid,
type: 'DELETE',
success: function (result) {
getCustomer()
}
});
}
function editItem(rowid) {
$.each(cus, function (key, item) {
if (item.customerId == rowid) {
$('#edit-id').val(item.customerId);
$('#edit-name').val(item.customerName);
$('#edit-telephone').val(item.customerTelephone);
$('#edit-address').val(item.customerAddress);
$('#edit-email').val(item.customerEmail);
}
});
}
function editcustomer() {
$("#spoilertwo").show();
const item = {
'customerName': $('#edit-name').val(),
'customerTelephone': $('#edit-telephone').val(),
'customerAddress': $('#edit-address').val(),
'customerEmail': $('#edit-email').val()
};
$.ajax({
url: 'https://localhost:44336/api/customer/' + rowid,
type: 'PUT',
accepts: 'application/json',
contentType: 'application/json',
data: JSON.stringify(item),
success: function (result) {
getCustomer();
$('#edit-name').val('');
$('#edit-telephone').val('');
$('#edit-address').val('');
$('#edit-email').val('');
}
});
$("#spoiler").hide();
return false;
};
</script>
</body>
</html>
Любая помощь будет принята с благодарностью.