# Niushop開源商城后臺列表
---
### 1. **列表加載與實際加載頁面是一個控制器方法，方便管理，例如articleList**
```php
/**
* 文章列表
*/
public function articleList()
{
if (request()->isAjax()) {
$article = new Article();
$page_index = request()->post('page_index', 1);
$page_size = request()->post('page_size', PAGESIZE);
$search_text = request()->post('search_text', '');
$condition = array(
'title|name' => array(
'like',
'%' . $search_text . '%'
)
);
$result = $article->getArticleList($page_index, $page_size, $condition, 'nca.create_time desc');
return $result;
} else {
return view($this->style . 'Cms/articleList');
}
}
```
### 2. html列表表頭
```php
<table class="table-class">
<colgroup>
<col style="width: 2%">
<col style="width: 19%;">
<col style="width: 17%;">
<col style="width: 17%;">
<col style="width: 10%;">
<col style="width: 16%;">
<col style="width: 4%;">
<col style="width: 15%;">
</colgroup>
<thead>
<tr align="center">
<th><i class="checkbox-common" input_all =".table-class tbody">
<input id="ckall" type="checkbox"></i>
</th>
<th align="left"><div class="iconbg-arrow up">標題</div></th>
<th align="left"><div class="iconbg-arrow up">分類</div></th>
<th><div class="iconbg-arrow up">點擊量 / 評論量</div></th>
<th><div class="iconbg-arrow up">狀態</div></th>
<th><div class="iconbg-arrow up">發布時間</div></th>
<th><div class="iconbg-arrow up">排序</div></th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
```
### 3. js異步加載數據,下面是表示分頁加載
```js
//分頁數據
function LoadingInfo(page_index) {
var search_text = $("#search_text").val();
$.ajax({
type : "post",
url : "{:__URL('ADMIN_MAIN/cms/articlelist')}",
data : { "page_index" : page_index, "page_size" : $("#showNumber").val(), "search_text" : search_text },
success : function(data) {
if (data["data"].length > 0) {
$(".table-class tbody").empty();
for (var i = 0; i < data["data"].length; i++) {
var html = '';
html += '<tr align="center">';
html += '<td><i class="checkbox-common"><input name="sub" type="checkbox" value="'+ data['data'][i]['article_id']+'" ></i></td>';
html += '<td align="left" title="'+data["data"][i]["title"]+'">' + data["data"][i]["title"]+ '</td>';
if(data["data"][i]["name"]==null){
html += '<td align="left">--</td>';
}else{
html += '<td align="left">' + data["data"][i]["name"]+ '</td>';
}
html += '<td>' + data["data"][i]["click"]+ ' / ' + data["data"][i]["comment_count"]+ '</td>';
if(data["data"][i]["status"]==0){
html += '<td>草稿</td>';
}else if(data["data"][i]["status"]==1){
html += '<td>待審核</td>';
}else if(data["data"][i]["status"]==2){
html += '<td>已發布</td>';
}else if(data["data"][i]["status"]==-1){
html += '<td>回收站</td>';
}
html += '<td>' + timeStampTurnTime(data["data"][i]["create_time"])+ '</td>';
html += '<td><input type="number" min="0" value="'+ data["data"][i]["sort"]+'" fieldid="'+ data['data'][i]['article_id']+'" class="num input-common input-common-sort" ></td>';
html += '<td><a target="_blank" href="'+__URL('SHOP_MAIN/article/detail?article_id='+ data['data'][i]['article_id']+'&class_id='+data["data"][i]["class_id"])+'">預覽</a><a href="'+__URL('ADMIN_MAIN/cms/updatearticle?id='+ data['data'][i]['article_id'])+'">修改</a><a style="cursor: pointer;" onclick="deleteArticle('+data['data'][i]['article_id']+')">刪除</a></td> ';
html += '</tr>';
$(".table-class tbody").append(html);
}
} else {
var html = '<tr align="center"><td colspan="8">暫無文章</td></tr>';
$(".table-class tbody").html(html);
}
initPageData(data["page_count"],data['data'].length,data['total_count']);
$("#pageNumber").html(pagenumShow(jumpNumber,$("#page_count").val(),{$pageshow}));
}
});
}
```
```
```
