检查最后一页和第一页，并相应地禁用按钮下一个按钮 [英] Check the last and the first page and disable button next-previous buttons accordingly
本文介绍了检查最后一页和第一页，并相应地禁用按钮下一个按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在获得页面nos。来自JSON中的java servlet。
注意：在url-resType和pageNo中传递了两个参数。
pageNo。返回0，10，20 ...（10的倍数）。
resType：检查我想要什么样的结果。你可以忽略这部分。
所以我的createTable函数中的url看起来像这样 -
如何禁用上一个按钮，当它是第一页？同样地，如何在最后一页禁用最后一个按钮？
这是代码。
var currentPageNo = 0; //跟踪当前显示的页面$（'。next-btn'）。unbind（click）。on（click，function（）{//给按钮一个ID（将它们包含在HTML中隐藏）userList （currentPageNo + 10）; adminList（currentPageNo + 10）;}）; $（一个先前-BTN。）解除绑定（ 点击）上（ 点击，函数（）{用户列表（currentPageNo-10）; adminList（currentPageNo-10）;}）。。 function userList（pageNo）{var resType =userList; CREATETABLE（resType，您做生意）; } function adminList（pageNo）{var resType =adminList; CREATETABLE（resType，您做生意）; } function createTable（resType，pageNo）{//更新全局变量currentPageNo = pageNo; //设置prev按钮的可见性：$（'。prev-btn'）。toggle（pageNo> 0）; //请求一个记录多于需要，以确定此页面之后是否有更多记录：$ .getJSON（https://api.randomuser.me/?results=11&start=+ pageNo，function（data） {$（'＃datatable tr：has（td）'）。empty（）; //检查是否有一个额外的记录，我们不显示，但是确定有一个下一页$（'。next-btn '）.toggle（data.results.length> 10）; //切片结果，所以不包括第11条记录：data.results.slice（0，10）.forEach（function（record，i）{// add编号记录的第二个参数var json = JSON.stringify（record）; $（'＃datatable'）。append（$（'< tr>'）。append（$（'< td> （'< input>'）。attr（'type'，'checkbox'）.addClass（'selectRow'）.val（json），（i + 1 + pageNo）//显示行号），$（' ; td>'）。append（$（'< a>'）。attr（'href'，record.picture.thumbnail）.addClass（'imgurl'） .attr（'target'，'_blank'）.text（record.name.first）），$（'< td>'）。append（record.dob））） }）; //显示prev和/或按钮}）。fail（function（error）{console.log（********** AJAX ERROR：+ error）;}）; } var savedData = []; //对象作为数组，所以要有一个命令。函数saveData（）{var errors = []; //添加选择映射$（'input.selectRow：checked'）。each（function（count）{//获取存储为checkbox的值的JSON var obj = JSON.parse（$（this）.val （））; //看看这个URL是否已经被收集（这很容易使用Set）if（savedData.find（record => record.picture.thumbnail === obj.picture.thumbnail））{errors.push（obj .name.first）;} else {//附加它savedData.push（obj）;}}）; refreshDisplay（）; if（errors.length）{alert（'以下内容已经被选中：\\\
'+ errors.join（'\\\
'））; }} function refreshDisplay（）{$（'。container'）。html（''）; saveData.forEach（function（obj）{//重置容器，并附加收集的数据（使用jQuery进行追加）$（'。container'）。append（$（'< div>'）addClass（'parent' .append（$（'< label>'）。addClass（'dataLabel'）。text（'Name：'），obj.name.first +''+ obj.name.last，$（'< br& '），// name& pic $（'< img>'）之间的换行符，addClass（'myLink'）。attr（'src'，obj.picture.thumbnail），$（'< br> ''，$（'< label>'）。addClass（'dataLabel'）。text（'Date of birth：'），obj.dob，$（'< br>'），$（'< label> ;'）。addClass（'dataLabel'）。text（'Address：'），$（'< br>'），obj.location.street，$（'< br>'），obj.location.city +''+ obj.location.postcode，$（'< br>'），obj.location.state，$（'< br>'），$（'< button>'）addClass '）的.text（' 删除 '），$（' <按钮> '）addClass（' 顶部-b tn'）text（'Swap with top'），$（'< button>'）。addClass（'down-btn'）。text（'Swap with down'）））;}）//清除复选框： $（'。selectRow'）。prop（'checked'，false）; handleEvents（）; } function logSavedData（）{//转换为JSON并记录到控制台。你会把它//发布到一些URL，或保存到localStorage。 console.log（JSON.stringify（savedData，null，2））; } function getIndex（elem）{return $（elem）.parent（'。parent'）。index（）; } $（document）.on（'click'，'.removeMe'，function（）{//从保存的Data savedData.splice中删除这个（getIndex（this），1）; //并重新显示refreshDisplay（）;} ）; / *在结果列表中交换显示的文章* / $（document）.on（'click'，'.down-btn，function（）{var index = getIndex（this）; //在内存中交换saveData.splice （index，2，savedData [index + 1]，savedData [index]）; //重新显示refreshDisplay（）;}）; $（document）.on（'click'，'.top-btn，function（）{var index = getIndex（this）; //在内存中交换内存saveData.splice（index-1，2，savedData [index] savedData [index-1]）; //重新显示refreshDisplay（）;}）; / *禁用顶部&结果列表中第一个和最后一个文章的下拉按钮* / function handleEvents（）{$（。top-btn，.down-btn）。prop（disabled，false）.show（）; $（。parent：first）。find（。top-btn）。prop（disabled，true）.hide（）; $（。parent：last）。find（。down-btn）。prop（disabled，true）.hide（）; } $（文件）。就绪（函数（）{$（ '＃showExtForm-BTN'）点击（函数（）{$（ '＃extUser'）切换（）;}）; $（ ＃extUserForm） .submit（function（e）{addExtUser（）; return false;}）;}）; function addExtUser（）{var extObj = {name：{title：mr，// No ladies？ :-) first：$（＃name）。val（），//姓氏？ }，dob：$（＃dob）。val（），图片：{thumbnail：$（＃myImg）。val（）}，location：{//也可能要求这个信息？ }}; savedData.push（extObj）; refreshDisplay（）; //将显示一些未定义的东西（位置...）}
< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheet/>< script src =https：// maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\"></script><script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2 .0 / jquery.min.js>< / script>< button class =btn btn-primary btn-smdata-toggle =modaldata-target =＃userListonclick =userList 0）>用户列表< / button>< button class =btn btn-primary btn-smonclick =logSavedData（）>获取保存的数据< / button>< button class =btn btn- primary btn-smdata-toggle =modaldata-target =＃adminListonclick =adminList（0）> User Admin< / button>< button class =btn btn-primary btn-sm data-toggle =modaldata-target =＃extUser>打开外部窗体< / button> < div class =modal fadeid =userListrole =dialog> < div class =modal-dialog modal-lg> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>用户列表< / h4> < / DIV> < div class =modal-body> < div class =table-responsive> < table class =table table-bordered table-hoverid =datatable> < TR> <的第i;选择< /第> <的第i;姓名< /第> <的第i; DOB< /第> < / TR> < /表> < / DIV> < div class =row> < div class =col-sm-offset-3 col-sm-4> < button type =buttonclass =btn btn-primary prev-btn>< span class =glyphicon glyphicon-chevron-left>< / span>< / button> < / DIV> < div class =col-sm-4> < button type =buttonclass =btn btn-primary next-btn>< span class =glyphicon glyphicon-chevron-right>< / span>< / button> < / DIV> < / DIV> < HR /> < div class =row> < div class =col-sm-offset-3 col-sm-4> < button type =buttonclass =btn btn-primary btn-smonclick =saveData（）>保存所选的< / button> < / DIV> < div class =col-sm-4> < button type =buttonclass =btn btn-primary btn-sm close-less-modaldata-dismiss =modal>关闭< / button> < / DIV> < / DIV> < br /> < / DIV> < / DIV> < / DIV> < / DIV> < div class =modal fadeid =adminListrole =dialog> < div class =modal-dialog modal-lg> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>管理列表< / h4> < / DIV> < div class =modal-body> < div class =table-responsive> < table class =table table-bordered table-hoverid =datatable> < TR> <的第i;选择< /第> <的第i;姓名< /第> <的第i; DOB< /第> < / TR> < /表> < / DIV> < div class =row> < div class =col-sm-offset-3 col-sm-4> < button type =buttonclass =btn btn-primary prev-btn>< span class =glyphicon glyphicon-chevron-left>< / span>< / button> < / DIV> < div class =col-sm-4> < button type =buttonclass =btn btn-primary next-btn>< span class =glyphicon glyphicon-chevron-right>< / span>< / button> < / DIV> < / DIV> < HR /> < div class =row> < div class =col-sm-offset-3 col-sm-4> < button type =buttonclass =btn btn-primary btn-smonclick =saveData（）>保存所选的< / button> < / DIV> < div class =col-sm-4> < button type =buttonclass =btn btn-primary btn-sm close-less-modaldata-dismiss =modal>关闭< / button> < / DIV> < / DIV> < br /> < / DIV> < / DIV> < / DIV> < / DIV> < div class =modal fadeid =extUserrole =dialog> < div class =modal-dialog modal-lg> <！ - 外部用户 - > < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>添加外部用户< / h4> < / DIV> < div class =modal-body> < form class =form-horizontalid =extUserForm> < div class =form-group> < label class =control-label col-sm-3for =name> Name：< / label> < div class =col-sm-8> < input type =textclass =form-controlid =namename =namerequired> < / DIV> < / DIV> < div class =form-group> < label class =control-label col-sm-3for =myImg> Image：< / label> < div class =col-sm-8> < input type =textclass =form-controlid =myImgname =myImgrequired> < / DIV> < / DIV> < div class =form-group> < label class =control-label col-sm-3for =dob> DOB：< / label> < div class =col-sm-8> < input type =dateclass =form-controlid =dobname =dobrequired> < / DIV> < / DIV> < hr /> < div class =form-group> < div class =col-sm-offset-3 col-sm-3> < button class =btn btn-primary btn-sm> Submit< / button> < / DIV> < div class =col-sm-3> < button type =resetclass =btn btn-primary btn-sm> Reset< / button> < / DIV> < div class =col-sm-3> < button type =buttonclass =btn btn-primary btn-sm close-external-modaldata-dismiss =modal>关闭< / button> < / DIV> < / DIV> < /形式> < / DIV> < / DIV> < / DIV> < / div>< div class =container>< / div>
解决方案
在 createTable 中，应该区分您要填充的两个表之一。所以你应该使用一个选择器，如：
$（'＃'+ resType +'table'）
对于上一个/下一个按钮选择器应该有同样的区别：
$（'＃'+ resType +'.next-btn'）
在同一个点击处理程序中调用 userList 和 adminList 也是错误的，因为它会使您跳过一页结果（从0到20）。你应该选择一个适当的选择器。所以更改你的prev / next点击处理程序到：
//选择userList
$（' #userList.prev-btn'）。click（function（）{
userList（currentPageNo-10）;
}）;
$（'＃userList .next-btn'）。click（function（）{
userList（currentPageNo + 10）;
}）;
$（'＃adminList .prev-btn'）。click（function（）{
adminList（currentPageNo-10）;
}）;
$（'＃adminList .next-btn'）。click（function（）{
adminList（currentPageNo + 10）;
}）;
最后，如果您更改一个东西，代码将隐藏下一个按钮在服务器上：让它返回11条记录，而不是10条。然后，JavaScript代码可以知道在10条记录之后还有更多的数据（没有显示第11条记录）。
这是更新的代码：
var currentPageNo = 0; //跟踪当前显示的页面//选择userList $（'＃userList .prev-btn'）的后代的按钮。click（function（）{userList（currentPageNo-10）;}）; $（'＃userList点击（function（）{userList（currentPageNo + 10）;}）; $（'＃adminList .prev-btn'）点击（function（）{adminList（currentPageNo-10）;}） ; $（'＃adminList .next-btn'）。click（function（）{adminList（currentPageNo + 10）;}）; function userList（pageNo）{var resType =userList; createTable（resType，pageNo）;} function adminList（pageNo）{var resType =adminList; createTable（resType，pageNo）;} function createTable（resType，pageNo）{//更新全局变量currentPageNo = pageNo; //设置正确的prev按钮的可见性：$（'＃'+ resType +'.prev-btn'）toggle（pageNo> 0）; //请求一个以上的记录，以确定此页面之后是否有更多记录：$ .getJSON（https://api.randomuser.me/?results=11&resType=+ resType +& pageIndex =+ pageNo，function（data）{var $ table = $（'＃'+ resType +'table'）; $（'tr：has（td）'，$ table）.empty（）; //检查是否有一个额外的记录，我们不显示，但是确定有一个下一页$（'＃'+ resType +'.next-btn'）。toggle（data.results.length> 10）; // Slice结果，所以第11个记录不包括在内：data.results.slice（0，10）.forEach（function（record，i）{//添加第二个参数用于编号记录var json = JSON.stringify（record）; $ table .append（$（'< tr>'）。append（$（'< td>'）。append（$（'< input>'）。attr（'type'，'checkbox'）.addClass 'selectRow'） 。$（'< a>'）。attr ）.addClass（'imgurl'）.attr（'target'，'_blank'）.text（record.name.first）），$（'< td>'）。append（record.dob） ）; }）; //显示prev和/或按钮}）。fail（function（error）{console.log（********** AJAX ERROR：+ error）;}）; } var savedData = []; //对象作为数组，所以要有一个order.function saveData（）{var errors = []; //添加选择映射$（'input.selectRow：checked'）。each（function（count）{//获取存储为checkbox的值的JSON var obj = JSON.parse（$（this）.val （））; //看看这个URL是否已经被收集（这很容易使用Set）if（savedData.find（record => record.picture.thumbnail === obj.picture.thumbnail））{errors.push（obj .name.first）;} else {//附加它savedData.push（obj）;}}）; refreshDisplay（）; if（errors.length）{alert（'以下内容已经被选中：\\\
'+ errors.join（'\\\
'））; }} function refreshDisplay（）{$（'。container'）。html（''）; saveData.forEach（function（obj）{//重置容器，并附加收集的数据（使用jQuery进行追加）$（'。container'）。append（$（'< div>'）addClass（'parent' .append（$（'< label>'）。addClass（'dataLabel'）。text（'Name：'），obj.name.first +''+ obj.name.last，$（'< br& '），// name& pic $（'< img>'）之间的换行符，addClass（'myLink'）。attr（'src'，obj.picture.thumbnail），$（'< br> ''，$（'< label>'）。addClass（'dataLabel'）。text（'Date of birth：'），obj.dob，$（'< br>'），$（'< label> ;'）。addClass（'dataLabel'）。text（'Address：'），$（'< br>'），obj.location.street，$（'< br>'），obj.location.city +''+ obj.location.postcode，$（'< br>'），obj.location.state，$（'< br> $（'< button>'）。addClass（'removeMe'）。text（'Delete'），$（'< button>'）addClass（'top-btn' ），$（'< button>'）。addClass（'down-btn'）。text（'Swap with down'）））; }）//清除复选框：$（'。selectRow'）。prop（'checked'，false）; handleEvents（）;} function logSavedData（）{//转换为JSON并记录到控制台。你会把它//发布到一些URL，或保存到localStorage。 console.log（JSON.stringify（savedData，null，2））;} function getIndex（elem）{return $（elem）.parent（'。parent'）。index（）;} $（document）单击'，'.removeMe'，function（）{//从保存的Data savedData.splice（getIndex（this），1）; //重新显示refreshDisplay（）;}）; / *将显示的文章结果列表* / $（document）.on（'click'，'.down-btn，function（）{var index = getIndex（this）; //在内存中交换saveData.splice（index，2，savedData [索引+ 1]，savedData [index]）; //重新显示refreshDisplay（）;}）; $（document）.on（'click'，.top-btn，function（）{var index = getIndex ）; //在内存中交换内存savedData.splice（index-1，2，savedData [index]，savedData [index-1]）; //并重新显示refreshDisplay（）;}）; / *禁用顶部&结果列表中第一个和最后一个文章的下拉按钮* / function handleEvents（）{$（。top-btn，.down-btn）。prop（disabled，false）.show（）; $（。parent：first）。find（。top-btn）。prop（disabled，true）.hide（）; $（文件）.ready（function（）{$（'＃showExtForm -b（）（）（）（）（）（）（）（）（） ;}）; function addExtUser（）{var extObj = {name：{title：mr，// No ladies？ :-) first：$（＃name）。val（），//姓氏？ }，dob：$（＃dob）。val（），图片：{thumbnail：$（＃myImg）。val（）}，location：{//也可能要求这个信息？ }}; savedData.push（extObj）; refreshDisplay（）; //将显示一些未定义的东西（位置...）}
< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheet/>< script src =https：// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7 /js/bootstrap.min.js\"></script><button class =btn btn-primary btn-smdata-toggle =modaldata-target =＃userListonclick =userList 0）>用户列表< / button>< button class =btn btn-primary btn-smonclick =logSavedData（）>获取保存的数据< / button>< button class =btn btn- primary btn-smdata-toggle =modaldata-target =＃adminListonclick =adminList（0）> User Admin< / button>< button class =btn btn-primary btn-sm data-toggle =modaldata-target =＃extUser>打开外部窗体< / button> < div class =modal fadeid =userListrole =dialog> < div class =modal-dialog modal-lg> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>用户列表< / h4> < / DIV> < div class =modal-body> < div class =table-responsive> < table class =table table-bordered table-hoverid =datatable> < TR> <的第i;选择< /第> <的第i;姓名< /第> <的第i; DOB< /第> < / TR> < /表> < / DIV> < div class =row> < div class =col-sm-offset-3 col-sm-4> < button type =buttonclass =btn btn-primary prev-btn>< span class =glyphicon glyphicon-chevron-left>< / span>< / button> < / DIV> < div class =col-sm-4> < button type =buttonclass =btn btn-primary next-btn>< span class =glyphicon glyphicon-chevron-right>< / span>< / button> < / DIV> < / DIV> < HR /> < div class =row> < div class =col-sm-offset-3 col-sm-4> < button type =buttonclass =btn btn-primary btn-smonclick =saveData（）>保存所选的< / button> < / DIV> < div class =col-sm-4> < button type =buttonclass =btn btn-primary btn-sm close-less-modaldata-dismiss =modal>关闭< / button> < / DIV> < / DIV> < br /> < / DIV> < / DIV> < / div>< / div>< div class =modal fadeid =adminListrole =dialog> < div class =modal-dialog modal-lg> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>管理列表< / h4> < / DIV> < div class =modal-body> < div class =table-responsive> < table class =table table-bordered table-hoverid =datatable> < TR> <的第i;选择< /第> <的第i;姓名< /第> <的第i; DOB< /第> < / TR> < /表> < / DIV> < div class =row> < div class =col-sm-offset-3 col-sm-4> < button type =buttonclass =btn btn-primary prev-btn>< span class =glyphicon glyphicon-chevron-left>< / span>< / button> < / DIV> < div class =col-sm-4> < button type =buttonclass =btn btn-primary next-btn>< span class =glyphicon glyphicon-chevron-right>< / span>< / button> < / DIV> < / DIV> < HR /> < div class =row> < div class =col-sm-offset-3 col-sm-4> < button type =buttonclass =btn btn-primary btn-smonclick =saveData（）>保存所选的< / button> < / DIV> < div class =col-sm-4> < button type =buttonclass =btn btn-primary btn-sm close-less-modaldata-dismiss =modal>关闭< / button> < / DIV> < / DIV> < br /> < / DIV> < / DIV> < / div>< / div>< div class =modal fadeid =extUserrole =dialog> < div class =modal-dialog modal-lg> <！ - 外部用户 - > < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>添加外部用户< / h4> < / DIV> < div class =modal-body> < form class =form-horizontalid =extUserForm> < div class =form-group> < label class =control-label col-sm-3for =name> Name：< / label> < div class =col-sm-8> < input type =textclass =form-controlid =namename =namerequired> < / DIV> < / DIV> < div class =form-group> < label class =control-label col-sm-3for =myImg> Image：< / label> < div class =col-sm-8> < input type =textclass =form-controlid =myImgname =myImgrequired> < / DIV> < / DIV> < div class =form-group> < label class =control-label col-sm-3for =dob> DOB：< / label> < div class =col-sm-8> < input type =dateclass =form-controlid =dobname =dobrequired> < / DIV> < / DIV> < hr /> < div class =form-group> < div class =col-sm-offset-3 col-sm-3> < button class =btn btn-primary btn-sm> Submit< / button> < / DIV> < div class =col-sm-3> < button type =resetclass =btn btn-primary btn-sm> Reset< / button> < / DIV> < div class =col-sm-3> < button type =buttonclass =btn btn-primary btn-sm close-external-modaldata-dismiss =modal>关闭< / button> < / DIV> < / DIV> < /形式> < / DIV> < / DIV> < / DIV> < / div>< div class =container>< / div>
I've 2 pop-ups to display the user list & admin list which would display 10 results per page, which is working fine.
I'm getting the page nos. from the java servlet in the JSON.
Note: There are 2 parameters passed in the url - resType and pageNo. pageNo. returns 0, 10, 20 ...(multiples of 10). resType: checks what sort of result I want. You can ignore this part.
So my url in the createTable function looks something like this instead -
How do I disable the previous button, when it is the first page? Likewise, how do I disable the last button, when it is the last page?
Here's the code.
var currentPageNo = 0; // Keep track of currently displayed page
$('.next-btn').unbind("click").on("click",function(){ // Give buttons an ID (include them in HTML as hidden)
userList(currentPageNo+10);
adminList(currentPageNo+10);
});
$('.prev-btn').unbind("click").on("click",function(){
userList(currentPageNo-10);
adminList(currentPageNo-10);
});
function userList(pageNo) {
var resType="userList";
createTable(resType,pageNo);
}
function adminList(pageNo) {
var resType="adminList";
createTable(resType,pageNo);
}
function createTable(resType, pageNo) {
// Update global variable
currentPageNo = pageNo;
// Set visibility of the "prev" button:
$('.prev-btn').toggle(pageNo > 0);
// Ask one record more than needed, to determine if there are more records after this page:
$.getJSON("https://api.randomuser.me/?results=11&start="+pageNo, function(data) {
$('#datatable tr:has(td)').empty();
// Check if there's an extra record which we do not display,
// but determines that there is a next page
$('.next-btn').toggle(data.results.length > 10);
// Slice results, so 11th record is not included:
data.results.slice(0, 10).forEach(function (record, i) { // add second argument for numbering records
var json = JSON.stringify(record);
$('#datatable').append(
$('<tr>').append(
$('<td>').append(
$('<input>').attr('type', 'checkbox')
.addClass('selectRow')
.val(json),
(i+1+pageNo) // display row number
),
$('<td>').append(
$('<a>').attr('href', record.picture.thumbnail)
.addClass('imgurl')
.attr('target', '_blank')
.text(record.name.first)
),
$('<td>').append(record.dob)
)
);
});
// Show the prev and/or buttons
}).fail(function(error) {
console.log("**********AJAX ERROR: " + error);
});
}
var savedData = []; // The objects as array, so to have an order.
function saveData(){
var errors = [];
// Add selected to map
$('input.selectRow:checked').each(function(count) {
// Get the JSON that is stored as value for the checkbox
var obj = JSON.parse($(this).val());
// See if this URL was already collected (that's easy with Set)
if (savedData.find(record => record.picture.thumbnail === obj.picture.thumbnail)) {
errors.push(obj.name.first);
} else {
// Append it
savedData.push(obj);
}
});
refreshDisplay();
if (errors.length) {
alert('The following were already selected:\n' + errors.join('\n'));
}
}
function refreshDisplay() {
$('.container').html('');
savedData.forEach(function (obj) {
// Reset container, and append collected data (use jQuery for appending)
$('.container').append(
$('<div>').addClass('parent').append(
$('<label>').addClass('dataLabel').text('Name: '),
obj.name.first + ' ' + obj.name.last,
$('<br>'), // line-break between name & pic
$('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'),
$('<label>').addClass('dataLabel').text('Date of birth: '),
obj.dob, $('<br>'),
$('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
obj.location.street, $('<br>'),
obj.location.city + ' ' + obj.location.postcode, $('<br>'),
obj.location.state, $('<br>'),
$('<button>').addClass('removeMe').text('Delete'),
$('<button>').addClass('top-btn').text('Swap with top'),
$('<button>').addClass('down-btn').text('Swap with down')
)
);
})
// Clear checkboxes:
$('.selectRow').prop('checked', false);
handleEvents();
}
function logSavedData(){
// Convert to JSON and log to console. You would instead post it
// to some URL, or save it to localStorage.
console.log(JSON.stringify(savedData, null, 2));
}
function getIndex(elem) {
return $(elem).parent('.parent').index();
}
$(document).on('click', '.removeMe', function() {
// Delete this from the saved Data
savedData.splice(getIndex(this), 1);
// And redisplay
refreshDisplay();
});
/* Swapping the displayed articles in the result list */
$(document).on('click', ".down-btn", function() {
var index = getIndex(this);
// Swap in memory
savedData.splice(index, 2, savedData[index+1], savedData[index]);
// And redisplay
refreshDisplay();
});
$(document).on('click', ".top-btn", function() {
var index = getIndex(this);
// Swap in memory
savedData.splice(index-1, 2, savedData[index], savedData[index-1]);
// And redisplay
refreshDisplay();
});
/* Disable top & down buttons for the first and the last article respectively in the result list */
function handleEvents() {
$(".top-btn, .down-btn").prop("disabled", false).show();
$(".parent:first").find(".top-btn").prop("disabled", true).hide();
$(".parent:last").find(".down-btn").prop("disabled", true).hide();
}
$(document).ready(function(){
$('#showExtForm-btn').click(function(){
$('#extUser').toggle();
});
$("#extUserForm").submit(function(e){
addExtUser();
return false;
});
});
function addExtUser() {
var extObj = {
name: {
title: "mr", // No ladies? :-)
first: $("#name").val(),
// Last name ?
},
dob: $("#dob").val(),
picture: {
thumbnail: $("#myImg").val()
},
location: { // maybe also ask for this info?
}
};
savedData.push(extObj);
refreshDisplay(); // Will show some undefined stuff (location...)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#userList" onclick="userList(0)">User List</button>
<button class="btn btn-primary btn-sm" onclick="logSavedData()">Get Saved Data</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#adminList" onclick="adminList(0)">User Admin</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#extUser">Open External Form</button>
<div class="modal fade" id="userList" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">User List</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="datatable">
<tr>
<th>Select</th>
<th>Name</th>
<th>DOB</th>
</tr>
</table>
</div>
<div class="row">
<div class="col-sm-offset-3 col-sm-4">
<button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-offset-3 col-sm-4">
<button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
<div class="modal fade" id="adminList" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Admin List</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="datatable">
<tr>
<th>Select</th>
<th>Name</th>
<th>DOB</th>
</tr>
</table>
</div>
<div class="row">
<div class="col-sm-offset-3 col-sm-4">
<button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-offset-3 col-sm-4">
<button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
<div class="modal fade" id="extUser" role="dialog">
<div class="modal-dialog modal-lg">
<!-- External User-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add External User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="extUserForm">
<div class="form-group">
<label class="control-label col-sm-3" for="name">Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="myImg">Image:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="myImg" name="myImg" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="dob">DOB:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="dob" name="dob" required>
</div>
</div>
<hr />
<div class="form-group">
<div class="col-sm-offset-3 col-sm-3">
<button class="btn btn-primary btn-sm">Submit</button>
</div>
<div class="col-sm-3">
<button type="reset" class="btn btn-primary btn-sm">Reset</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container"></div>
解决方案
In createTable a distinction should be made between which of the two tables you want to populate. So you should use a selector like:
$('#' + resType + ' table')
The same distinction should be made for the prev/next button selectors:
$('#' + resType + ' .next-btn')
And it is also wrong to call both userList and adminList in the same click handler, as it will make you skip a page of results (from 0 to 20). You should call the appropriate one based one the selector. So change your prev/next click handlers to:
// Select button that is descendant of userList
$('#userList .prev-btn').click(function(){
userList(currentPageNo-10);
});
$('#userList .next-btn').click(function(){
userList(currentPageNo+10);
});
$('#adminList .prev-btn').click(function(){
adminList(currentPageNo-10);
});
$('#adminList .next-btn').click(function(){
adminList(currentPageNo+10);
});
Finally, the code will hide the next button if you change one thing on the server: let it return 11 records instead of 10. The JavaScript code can then know if after the 10 records there is still more data (without showing the 11th record).
Here is updated code:
var currentPageNo = 0; // Keep track of currently displayed page
// Select button that is descendant of userList
$('#userList .prev-btn').click(function(){
userList(currentPageNo-10);
});
$('#userList .next-btn').click(function(){
userList(currentPageNo+10);
});
$('#adminList .prev-btn').click(function(){
adminList(currentPageNo-10);
});
$('#adminList .next-btn').click(function(){
adminList(currentPageNo+10);
});
function userList(pageNo) {
var resType="userList";
createTable(resType,pageNo);
}
function adminList(pageNo) {
var resType="adminList";
createTable(resType,pageNo);
}
function createTable(resType, pageNo) {
// Update global variable
currentPageNo = pageNo;
// Set visibility of the correct "prev" button:
$('#' + resType + ' .prev-btn').toggle(pageNo > 0);
// Ask one record more than needed, to determine if there are more records after this page:
$.getJSON("https://api.randomuser.me/?results=11&resType="+resType + "&pageIndex=" + pageNo, function(data) {
var $table = $('#' + resType + ' table');
$('tr:has(td)', $table).empty();
// Check if there's an extra record which we do not display,
// but determines that there is a next page
$('#' + resType + ' .next-btn').toggle(data.results.length > 10);
// Slice results, so 11th record is not included:
data.results.slice(0, 10).forEach(function (record, i) { // add second argument for numbering records
var json = JSON.stringify(record);
$table.append(
$('<tr>').append(
$('<td>').append(
$('<input>').attr('type', 'checkbox')
.addClass('selectRow')
.val(json),
(i+1+pageNo) // display row number
),
$('<td>').append(
$('<a>').attr('href', record.picture.thumbnail)
.addClass('imgurl')
.attr('target', '_blank')
.text(record.name.first)
),
$('<td>').append(record.dob)
)
);
});
// Show the prev and/or buttons
}).fail(function(error) {
console.log("**********AJAX ERROR: " + error);
});
}
var savedData = []; // The objects as array, so to have an order.
function saveData(){
var errors = [];
// Add selected to map
$('input.selectRow:checked').each(function(count) {
// Get the JSON that is stored as value for the checkbox
var obj = JSON.parse($(this).val());
// See if this URL was already collected (that's easy with Set)
if (savedData.find(record => record.picture.thumbnail === obj.picture.thumbnail)) {
errors.push(obj.name.first);
} else {
// Append it
savedData.push(obj);
}
});
refreshDisplay();
if (errors.length) {
alert('The following were already selected:\n' + errors.join('\n'));
}
}
function refreshDisplay() {
$('.container').html('');
savedData.forEach(function (obj) {
// Reset container, and append collected data (use jQuery for appending)
$('.container').append(
$('<div>').addClass('parent').append(
$('<label>').addClass('dataLabel').text('Name: '),
obj.name.first + ' ' + obj.name.last,
$('<br>'), // line-break between name & pic
$('<img>').addClass('myLink').attr('src', obj.picture.thumbnail), $('<br>'),
$('<label>').addClass('dataLabel').text('Date of birth: '),
obj.dob, $('<br>'),
$('<label>').addClass('dataLabel').text('Address: '), $('<br>'),
obj.location.street, $('<br>'),
obj.location.city + ' ' + obj.location.postcode, $('<br>'),
obj.location.state, $('<br>'),
$('<button>').addClass('removeMe').text('Delete'),
$('<button>').addClass('top-btn').text('Swap with top'),
$('<button>').addClass('down-btn').text('Swap with down')
)
);
})
// Clear checkboxes:
$('.selectRow').prop('checked', false);
handleEvents();
}
function logSavedData(){
// Convert to JSON and log to console. You would instead post it
// to some URL, or save it to localStorage.
console.log(JSON.stringify(savedData, null, 2));
}
function getIndex(elem) {
return $(elem).parent('.parent').index();
}
$(document).on('click', '.removeMe', function() {
// Delete this from the saved Data
savedData.splice(getIndex(this), 1);
// And redisplay
refreshDisplay();
});
/* Swapping the displayed articles in the result list */
$(document).on('click', ".down-btn", function() {
var index = getIndex(this);
// Swap in memory
savedData.splice(index, 2, savedData[index+1], savedData[index]);
// And redisplay
refreshDisplay();
});
$(document).on('click', ".top-btn", function() {
var index = getIndex(this);
// Swap in memory
savedData.splice(index-1, 2, savedData[index], savedData[index-1]);
// And redisplay
refreshDisplay();
});
/* Disable top & down buttons for the first and the last article respectively in the result list */
function handleEvents() {
$(".top-btn, .down-btn").prop("disabled", false).show();
$(".parent:first").find(".top-btn").prop("disabled", true).hide();
$(".parent:last").find(".down-btn").prop("disabled", true).hide();
}
$(document).ready(function(){
$('#showExtForm-btn').click(function(){
$('#extUser').toggle();
});
$("#extUserForm").submit(function(e){
addExtUser();
return false;
});
});
function addExtUser() {
var extObj = {
name: {
title: "mr", // No ladies? :-)
first: $("#name").val(),
// Last name ?
},
dob: $("#dob").val(),
picture: {
thumbnail: $("#myImg").val()
},
location: { // maybe also ask for this info?
}
};
savedData.push(extObj);
refreshDisplay(); // Will show some undefined stuff (location...)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#userList" onclick="userList(0)">User List</button>
<button class="btn btn-primary btn-sm" onclick="logSavedData()">Get Saved Data</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#adminList" onclick="adminList(0)">User Admin</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#extUser">Open External Form</button>
<div class="modal fade" id="userList" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">User List</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="datatable">
<tr>
<th>Select</th>
<th>Name</th>
<th>DOB</th>
</tr>
</table>
</div>
<div class="row">
<div class="col-sm-offset-3 col-sm-4">
<button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-offset-3 col-sm-4">
<button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
<div class="modal fade" id="adminList" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Admin List</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="datatable">
<tr>
<th>Select</th>
<th>Name</th>
<th>DOB</th>
</tr>
</table>
</div>
<div class="row">
<div class="col-sm-offset-3 col-sm-4">
<button type="button" class="btn btn-primary prev-btn"><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary next-btn"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-offset-3 col-sm-4">
<button type="button" class="btn btn-primary btn-sm" onclick="saveData()">Save selected</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary btn-sm close-less-modal" data-dismiss="modal">Close</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
<div class="modal fade" id="extUser" role="dialog">
<div class="modal-dialog modal-lg">
<!-- External User-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add External User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="extUserForm">
<div class="form-group">
<label class="control-label col-sm-3" for="name">Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="myImg">Image:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="myImg" name="myImg" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="dob">DOB:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="dob" name="dob" required>
</div>
</div>
<hr />
<div class="form-group">
<div class="col-sm-offset-3 col-sm-3">
<button class="btn btn-primary btn-sm">Submit</button>
</div>
<div class="col-sm-3">
<button type="reset" class="btn btn-primary btn-sm">Reset</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container"></div>
这篇关于检查最后一页和第一页，并相应地禁用按钮下一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
