html:
<button type="button" class="btn btn-default" id="importMaterials">导入项目材料</button>
<input type="file" class="custom-file-input" multiple="multiple" id="filepath" onchange="selectTicket(event)" style="display: none;">
<div id = "uploadbox" style="margin-top:10px ;">
<span style="display:inline;" class="list-group-item">已选择的文件 :)</span>
</div>
方法:
$("#importMaterials").click(function() {
$("#filepath").click();
});
function selectTicket(event) {
$("#ulelement li").remove();
var files = event.target.files;
var ulId = document.getElementById('ulelement');
for(var i = 0; i < files.length; i++) {
var file = files[i].name;
console.log(file);
var aLi = document.createElement('li');
aLi.setAttribute("class", "list-group-item");
aLi.innerHTML = file;
ulId.appendChild(aLi);
}
}
分页思路:
⭐html:
<div class="col-md-1"></div>
<div class="col-md-10" align="center" style="padding-left: 42px;">
<table class="table table-striped table-sm" id="datatable">
<thead>
<tr>
<th>序号</th>
<th>^.^</th>
<th>id</th>
<th>projectName</th>
<th>createTime</th>
<th>updateTime</th>
<th id="delAll">多项删除</th>
<!-- <th class="glyphicon glyphicon-th-list " id="delAll"></th> -->
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-10" align="center" style="padding-left: 42px;">
<ul class="pagination" id="ulelement">
<!--
<li><a aria-label="Previous" onclick="go(1);" ><span>1</span></a></li>
<li><a aria-label="Previous" onclick="go(2);"><span>2</span></a></li>
-->
</ul>
</div>
<div class="col-md-1"></div>
⭐步骤
//第一步:pagination class对象
var ulitem = $("#ulelement");
//第二部: 清空对象内html内容. // $(".pagination li").remove();
$(".pagination li").remove();
$("#tbody tr").remove();
//第三部:ajax請求内容
$.ajax({
type : "get",
url : "/data/projectList/" + num,
data : num,
datatype : "json",
async : false,
success : function(data) {
console.log(data.rainbow);
console.log(data);
for (var i = 0; i < data.rainbow.length; i++) {
item += htmlValueTag(data.rainbow[i]);
}
console.log(item);
for (var i = 0; i < data.data.length; i++) {
liItemArr[i] = data.data[i];
}
}
});
//使用htmlValueTag方法添加html内容.
for (var i = 0; i < liItemArr.length; i++) {
var tritem = $("<tr id= "+liItemArr[i].id+" projectname = "+liItemArr[i].projectName+">"
+"<td >⭐"+(i+1)+"</td>"
+ "<td ><input type='checkbox' name='project' /></td>"
+ "<td id="+liItemArr[i].id+">"+ liItemArr[i].id+ "</td>"
+ "<td>"+ liItemArr[i].projectName+ "</td>"
+ "<td>"+renderTime( liItemArr[i].createTime)+ "</td>"
+ "<td>"+renderTime( liItemArr[i].updateTime)+ "</td>"
+ "<td "
+ "onclick='delfun("+ liItemArr[i].id+ ",this)'>删除</td>"+ "</tr>");
/* + "<td class='glyphicon glyphicon-minus-sign deltd'"
+ "onclick='delfun("+ liItemArr[i].id+ ",this)'></td>"+ "</tr>"); */
// var $table = $('table tbody');
$("#tbody").append(tritem);
}
$("#ulelement").append(item);
⭐转时间格式:
function renderTime(date) {
var dateee = new Date(date).toJSON();
return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
}
由 "2019-01-03T00:18:21.000+0000" 转 "2019-07-02 14:11:57"