var
user = [
{id: 1, cardId:
"6225880287860549"
, pwd:
"909090"
, money: 9000},
{id: 2, cardId:
"6225880287862345"
, pwd:
"666666"
, money: 100},
{id: 3, cardId:
"6225880287861234"
, pwd:
"888888"
, money: 5000},
{id: 4, cardId:
"6225880287860549"
, pwd:
"909090"
, money: 9000},
{id: 5, cardId:
"6225880287862345"
, pwd:
"666666"
, money: 100},
{id: 6, cardId:
"6225880287861234"
, pwd:
"888888"
, money: 5000},
{id: 7, cardId:
"6225880287860549"
, pwd:
"909090"
, money: 9000},
{id: 8, cardId:
"6225880287862345"
, pwd:
"666666"
, money: 100},
{id: 9, cardId:
"6225880287861234"
, pwd:
"888888"
, money: 5000}
]
var
operid = -1;
var
perSize = 4;
var
currentPage = 1;
var
totalPage = -1;
window.onload=
function
(){
displayUserTable();
checkAll();
checkItemAll();
add();
del();
edit();
pagebar();
pageClick();
}
function
edit(){
$(
"#userTable"
).on(
'click'
,
'.edit'
,
function
(){
var
index = $(
this
).attr(
'data-index'
);
operid = index;
$(
"#addUser"
).modal(
'show'
);
$(
"#txtId"
).val(user[index].id);
$(
"#txtCard"
).val(user[index].cardId);
$(
"#txtPwd"
).val(user[index].pwd);
$(
"#txtMoney"
).val(user[index].money);
})
}
function
del(){
$(
"#userTable"
).on(
'click'
,
'.del'
,
function
(){
console.log(
this
);
var
index = $(
this
).attr(
'data-index'
);
user.splice(index,1);
pagebar();
displayUserTable();
})
}
function
add(){
$(
"#btnAddForm"
).click(
function
(){
operid= -1;
$(
"#addUser"
).modal(
'show'
);
})
$(
"#btnAdd"
).click(
function
(){
var
id = $(
"#txtId"
).val();
var
card = $(
"#txtCard"
).val();
var
pwd = $(
"#txtPwd"
).val();
var
money = $(
"#txtMoney"
).val();
var
obj = {
"id"
:id,
"cardId"
:card,
"pwd"
:pwd,
"money"
:Number(money)};
if
(operid==-1){
user.push(obj);
}
else
{
user.splice(operid,1,obj);
}
displayUserTable();
pagebar();
$(
"#addUser"
).modal(
'hide'
);
})
$(
"#btnCancel"
).click(
function
(){
$(
"#addUser"
).modal(
'hide'
);
})
}
function
checkAll(){
$(
"#checkAll"
).click(
function
(){
var
checked =
this
.checked;
$(
"input[name='checkItem']"
).each(
function
(index,item){
item.checked =checked;
})
})
}
function
checkItemAll(){
$(
"#userTable"
).on(
'click'
,
'input[name=\'checkItem\']'
,
function
(){
var
isAll =
true
;
$(
"input[name='checkItem']"
).each(
function
(index,item){
if
(!item.checked){
isAll =
false
;
}
})
if
(isAll){
$(
"#checkAll"
)[0].checked=
true
;
}
else
{
$(
"#checkAll"
)[0].checked=
false
;
}
})
}
function
displayUserTable(){
$(
"#userTable"
).html(
""
);
$(
"#checkAll"
)[0].checked=
false
;
var
start = (currentPage -1 )*perSize;
var
end = start + perSize;
var
outHtml =
""
;
for
(
var
i=start;i<end&&i<user.length;i++){
outHtml+=
"<tr>"
+
"<td><input type='checkbox' name=\"checkItem\" /></td>"
+
"<td>"
+user<i>.id+
"</td>"
+
"<td>"
+user<i>.cardId+
"</td>"
+
"<td>"
+user<i>.pwd+
"</td>"
+
"<td>"
+user<i>.money+
"</td>"
+
"<td><button class=\"btn btn-default del\" data-index='"
+i+
"'>刪除</button><button class=\"btn btn-default edit\" data-index='"
+i+
"'>編輯</button></td>"
+
"</tr>"
;
}
$(
"#userTable"
).html(outHtml);
}
function
pagebar(){
totalPage = Math.ceil(user.length / perSize);
if
(currentPage>totalPage){
currentPage = totalPage;
}
$(
"#divPage"
).html(
""
);
var
str =
""
;
for
(
var
i = 0;i<totalPage;i++){
if
(currentPage==(i+1)){
str+=
"<button class=\"btn btn-primary page\">"
+(i+1)+
"</button>"
;
}
else
{
str+=
"<button class=\"btn btn-default page\">"
+(i+1)+
"</button>"
;
}
}
$(
"#divPage"
).html(str);
}
function
pageClick(){
$(
"#divPage"
).on(
"click"
,
".page"
,
function
(){
$(
".page"
).each(
function
(index,item){
$(
this
).removeClass(
'btn-primary'
);
});
$(
this
).addClass(
'btn-primary'
);
currentPage = Number(
this
.innerText);
displayUserTable();
});
}
