Я попытался выполнить разбиение на страницы в JSFiddle (https://jsfiddle.net/rinku16/hn3t9gz6/33/) с использованием данных JSON, но проблема заключается в том, что теперь он некорректно работает для отображения количества строк на странице.
Я сделал отдельную функцию для обработки данных JSON и отображения результата.
Но я сталкиваюсь с небольшими проблемами, как показано ниже:
1) Количество строк на странице не работает должным образом, хотя я пытался изменить значение var elements_per_page = 3;. Я также хочу выбрать опцию выбора пользователя, чтобы увидеть количество строк на странице, которую он хочет видеть. как вы можете видеть ниже pi c.
2) Также стиль overflow-x не работает должным образом, как показано ниже pi c .
3) Также я хочу использовать свойство CSS focus, чтобы узнать, какой страницей пользователя является class=nav из 1,2 , Кнопка 3,4 между предыдущим и следующим.
JSON данные на стороне клиента для разбивки на страницы.
var userDetails = [
{
"Lead_Id": "66",
"FirstName": "John",
"LastName": "Doe",
"Company": "Google",
"Website": "www.google.com",
"Designation": "Manager",
"Linkedin": "www.linkedin.com\/john-doe",
"Email": "johndoe@google.com",
"Phone": "5125501553",
"State": "Delaware",
"Country": "USA",
"TechArea": "Cloud computing",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-02-03",
"NextContactDate": "2020-02-29",
"LeadDescription": "This is lead description testing",
"OwnerNotes": null,
"SetReminder": "2020-02-29",
"AdminNotes": "This is admin notes testing",
"LeadStatus": "Planned",
"LeadAddedBy": "28",
"LeadAddedOn": "2020-02-03 16:28:26",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
},
{
"Lead_Id": "67",
"FirstName": "Tohn",
"LastName": "Doe",
"Company": "Microsoft",
"Website": "www.microsoft.com",
"Designation": "Manager",
"Linkedin": "www.linkedin.com\/tohn-doe",
"Email": "tohn@microsoft.com",
"Phone": "123456",
"State": "California",
"Country": "USA",
"TechArea": "Computer Networks",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-03-05",
"NextContactDate": "2020-03-07",
"LeadDescription": "This is test lead description",
"OwnerNotes": null,
"SetReminder": "2020-03-11",
"AdminNotes": "This is testing admin notes",
"LeadStatus": "Planned",
"LeadAddedBy": "18",
"LeadAddedOn": "2020-03-05 10:47:21",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
},
{
"Lead_Id": "122",
"FirstName": "Test1",
"LastName": "User1",
"Company": "NA",
"Website": "NA",
"Designation": "Tester",
"Linkedin": "NA",
"Email": "test1@test.com",
"Phone": "7508023064",
"State": "Chandigarh",
"Country": "India",
"TechArea": "Computers",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-03-05",
"NextContactDate": "2020-03-05",
"LeadDescription": "Testing Lead Description",
"OwnerNotes": "Testing Owner Notes",
"SetReminder": "2020-03-05",
"AdminNotes": "This is testing admin notes",
"LeadStatus": "Planned",
"LeadAddedBy": "18",
"LeadAddedOn": "2020-03-05 17:34:25",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
},
{
"Lead_Id": "123",
"FirstName": "Test2",
"LastName": "User2",
"Company": "NA",
"Website": "NA",
"Designation": "Tester",
"Linkedin": "NA",
"Email": "test2@test.com",
"Phone": "7508023064",
"State": "Chandigarh",
"Country": "India",
"TechArea": "Computers",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-03-05",
"NextContactDate": "2020-03-05",
"LeadDescription": "Testing Lead Description",
"OwnerNotes": "Testing Owner Notes",
"SetReminder": "2020-03-05",
"AdminNotes": "This is testing admin notes",
"LeadStatus": "Planned",
"LeadAddedBy": "18",
"LeadAddedOn": "2020-03-05 17:34:25",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
},
{
"Lead_Id": "124",
"FirstName": "Test3",
"LastName": "",
"Company": "NA",
"Website": "NA",
"Designation": "Tester",
"Linkedin": "NA",
"Email": "test3@test.com",
"Phone": "7508023064",
"State": "Chandigarh",
"Country": "India",
"TechArea": "Computers",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-03-05",
"NextContactDate": "2020-03-05",
"LeadDescription": "Testing Lead Description",
"OwnerNotes": "Testing Owner Notes",
"SetReminder": "2020-03-05",
"AdminNotes": "",
"LeadStatus": "Planned",
"LeadAddedBy": "18",
"LeadAddedOn": "2020-03-06 10:54:12",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
},
{
"Lead_Id": "125",
"FirstName": "Test4",
"LastName": "User4",
"Company": "",
"Website": "NA",
"Designation": "",
"Linkedin": "NA",
"Email": "test4@test.com",
"Phone": "7508023064",
"State": "Chandigarh",
"Country": "India",
"TechArea": "Computers",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-03-05",
"NextContactDate": "2020-03-05",
"LeadDescription": "Testing Lead Description",
"OwnerNotes": "",
"SetReminder": "2020-03-05",
"AdminNotes": "This is testing admin notes",
"LeadStatus": "",
"LeadAddedBy": "18",
"LeadAddedOn": "2020-03-06 10:54:12",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
},
{
"Lead_Id": "126",
"FirstName": "Test5",
"LastName": "",
"Company": "NA",
"Website": "NA",
"Designation": "Tester",
"Linkedin": "NA",
"Email": "test5@test.com",
"Phone": "7508023064",
"State": "Chandigarh",
"Country": "India",
"TechArea": "Computers",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-03-05",
"NextContactDate": "2020-03-05",
"LeadDescription": "This is test description",
"OwnerNotes": "Testing Owner Notes",
"SetReminder": "2020-03-05",
"AdminNotes": "This is testing admin notes",
"LeadStatus": "Planned",
"LeadAddedBy": "18",
"LeadAddedOn": "2020-03-06 10:54:12",
"LeadUpdatedBy": "18",
"LeadUpdatedOn": "2020-03-06 10:55:08"
},
{
"Lead_Id": "127",
"FirstName": "John",
"LastName": "Doe",
"Company": "Google",
"Website": "www.google.com",
"Designation": "Manager",
"Linkedin": "www.linkedin.com\/john-doe",
"Email": "johndoe@google.com",
"Phone": "5125501553",
"State": "Delaware",
"Country": "USA",
"TechArea": "Cloud computing",
"FirmType": "Corporate",
"FirmSize": "Less than 10",
"LastContactDate": "2020-02-03",
"NextContactDate": "2020-02-29",
"LeadDescription": "This is lead description testing",
"OwnerNotes": null,
"SetReminder": "2020-02-29",
"AdminNotes": "This is admin notes testing",
"LeadStatus": "Planned",
"LeadAddedBy": "28",
"LeadAddedOn": "2020-02-03 16:28:26",
"LeadUpdatedBy": null,
"LeadUpdatedOn": null
}
];
Ниже приведен последний скрипт на стороне клиента.
// This is script to load table based on filter section
$(document).ready(function() {
var delay = 1000;
// Campaign Submit Info
$('[name="search_submit"]').click(function(e) {
$('#load-csv-file-button').attr('style','display:none;');
$("#filterRecords").attr('style','display:block;');
$('#add_lead_info').attr('style','display:none;');
e.preventDefault();
var lead_owner = $('#filterformpost').find('#lead_owner_select option:selected').val();
var lead_status = $('#filterformpost').find('#lead_status_select option:selected').val();
var campaign_status = $('#filterformpost').find('#campaign_status_select option:selected').val();
var company_name = $('#filterformpost').find('#company_name_select option:selected').val();
var tech_area = $('#filterformpost').find('#tech_area_select option:selected').val();
var firm_size = $('#filterformpost').find('#firm_size_select option:selected').val();
var firm_type = $('#filterformpost').find('#firm_type_select option:selected').val();
var country_name = $('#filterformpost').find('#country_name_select option:selected').val();
var state_name = $('#filterformpost').find('#state_name_select option:selected').val();
var start_date = $('#filterformpost').find('#start_date_search').val();
var end_date = $('#filterformpost').find('#end_date_search').val();
$.ajax({
type: "POST",
url: "./server/search.php",
data: {
"lead_owner": lead_owner,
"lead_status": lead_status,
"campaign_status": campaign_status,
"company_name": company_name,
"tech_area": tech_area,
"firm_size": firm_size,
"firm_type": firm_type,
"country_name": country_name,
"state_name": state_name,
"start_date": start_date,
"end_date": end_date
},
beforeSend: function() {
$('.search_lead_filter_message_box').html(
'<img src="tenor.gif" width="40" height="40"/>'
);
},
success:function(data){
console.log('data:')
console.log(data)
userDetails = data
var result = $.parseJSON(data);
console.log('result:')
console.log(result)
$("#filterRecords").empty();
//###########################################
// Pagination code start
//###########################################
$("#pagination").attr('style','display:block;');
$('#pagination').html('<div class="row"><div class="col"><button class="col" id="PreValue"><i class="ion-skip-backward"></i> Previous</button></div> <div id="nav-numbers" class="col nav"></div> <div class="col"><button class="col" id="nextValue">Next <i class="ion-skip-forward"></i></button></div></div>');
paginate_json_data(result)
//###########################################
// Pagination code end
//###########################################
$('.search_lead_filter_message_box').html('');
}
});
});
});
function paginate_json_data(userDetails){
$('.search_lead_filter_message_box').html('');
userDetails = userDetails
// var table = $('#myTable');
var table='';
table = $("<table id='myTable' style='width:30%;'></table>");
var max_size=userDetails.length;
var sta = 0;
//here if i change 3 to 10 then number of rows some navigation 3 rows display and then 10 row is displayed.
var elements_per_page = 3;
var limit = elements_per_page;
goFun(sta,limit);
function goFun(sta,limit){
console.log(sta,limit);
table.append('<thead><th>#</th><th>Name</th><th>Company</th><th>Website</th><th>Designation</th><th>Linkedin</th><th>Email</th><th>Phone</th><th>State</th><th>Country</th><th>TechArea</th><th>Firm Type</th><th>Firm Size</th><th>Last Contact Date</th><th>Next Contact Date</th><th>Lead Description</th><th>Owner Notes</th><th>Reminder Date</th><th>Admin Notes</th><th>Lead Status</th><th>Lead Added By</th><th>Lead Added On</th><th>Lead Updated By</th><th>Lead Updated On</th></thead><br>');
table.append('<tbody style="overflow-x:auto;"></tbody>');
for(var i=sta;i<limit;i++){
var tab='<tr><td>'+i+"\n"+'</td><td>'+"<a target='_blank' href=./lead/index.html?lead_id="+ userDetails[i].Lead_Id + " </a>"+userDetails[i].FirstName+' '+userDetails[i].LastName+"\n"+'</td><td>'+userDetails[i].Company+"\n"+'</td><td>'+userDetails[i].Website+"\n"+'</td><td>'+userDetails[i].Designation+"\n"+'</td><td>'+userDetails[i].Linkedin+"\n"+'</td><td>'+"<a href=mailto:" + userDetails[i].Email + ">" + userDetails[i].Email + "</a>"+"\n"+'</td><td>'+userDetails[i].Phone + "\n" +'</td><td>'+userDetails[i].State +"\n" +'</td><td>'+userDetails[i].Country +"\n" +'</td><td>'+userDetails[i].TechArea + "\n" +'</td><td>'+userDetails[i].FirmType + "\n" +'</td><td>'+userDetails[i].FirmSize + "\n" +'</td><td>'+userDetails[i].LastContactDate + "\n" +'</td><td>'+userDetails[i].NextContactDate + "\n" +'</td><td>'+userDetails[i].LeadDescription + "\n" +'</td><td>'+userDetails[i].OwnerNotes + "\n" +'</td><td>'+userDetails[i].SetReminder + "\n" +'</td><td>'+userDetails[i].AdminNotes + "\n" +'</td><td>'+userDetails[i].LeadStatus + "\n" +'</td><td>'+"<a target='_blank' href=./account/index.html?user_id="+ userDetails[i].LeadAddedBy + " </a>"+userDetails[i].LeadAddedBy + "\n" +'</td><td>'+userDetails[i].LeadAddedOn + "\n" +'</td><td>'+userDetails[i].LeadUpdatedBy + "\n" +'</td><td>'+userDetails[i].LeadUpdatedOn +"\n" +'</td></tr>';
$('#myTable').append(tab)
}
$("#filterRecords").html(table);
}
$('#nextValue').click(function(){
var next = limit;
if(max_size>=next) {
def = limit+elements_per_page;
limit = def
table.empty();
if(limit > max_size) {
def = max_size;
}
goFun(next,def);
}
});
$('#PreValue').click(function(){
var pre = limit-(2*elements_per_page);
if(pre>=0) {
limit = limit-elements_per_page;
table.empty();
goFun(pre,limit);
}
});
var number = Math.round(userDetails.length / elements_per_page);
for(i=0;i<=number;i++) {
$('.nav').append('<button class="btn">'+i+'</button>');
}
$('.nav button').click(function(){
var start = $(this).text();
table.empty();
limit = 3*(parseInt(start)+1) > max_size ? max_size: 3*(parseInt(start)+1)
goFun(start*3,limit);
});
}