jquery中繼器佈局水平要查看項目像youtube

Question

我需要水平佈局的jquery中繼器能夠綁定來自數據庫的數據通過以json格式或任何需要的格式返回它並能夠使用分頁。有些東西像jtable但水平佈局。我想要像YouTube的主頁佈局

Answer 1

我需要從數據庫內聯查看多個視頻記錄，如YouTube視圖在主頁上的視頻加分頁..我的項目使用Web API和jQuery和查看列表使用jtable（ http://jtable.org/）我是不是能看到我的視頻，我想，但現在我可以用下面的

在網頁API控制器

[HttpPost] 
    public object GettAllVideosBypaging(object parmter) 
    { 

     dynamic Result = JsonConvert.DeserializeObject(parmter.ToString()); 
     int jtStartIndex = Result.jtStartIndex; 
     int jtPageSize = Result.jtPageSize; 
     //string jtSorting = Result.jtSorting; 

     try 
     { 
      List<PublicTrainingVideos> lst = trnmanager.GetAllVideos(jtStartIndex, jtPageSize).ToList(); 
      return new { Result = "OK", Records = lst, TotalRecordCount = trnmanager.GetVideosRecordsCount() }; 
     } 
     catch (Exception ex) 
     { 
      return new { Result = "ERROR", Message = ex.Message }; 
     }} 

**在jsFile（我現在我只是觀看視頻名字，但我可以在裏面畫任何html）**

function GetPublicVideos() {  
jqueryNew('#TaskCommentsTableContainer').jtable({ 
    paging: true, 
    pageSize: 2, 
    sorting: false, 
    defaultSorting: 'VideoID ASC', 
    actions: { 
     listAction: '/Videos/GettAllVideosBypaging' 
    }, 
    fields: { 
     VideoID: { 
      key: true, 
      create: false, 
      edit: false, 
      list: false 

     } , 
     ShowData: { 
      width: '20%', 
      display: function (data) { 
       var VidePhoto = data.record.VideoName; 
       return $('<li style="display:inline"">' + VidePhoto + '</li>'); 
      } 
     } 

    } 

}); 
jqueryNew('#TaskCommentsTableContainer').jtable('load');} 

在用戶控制器

<script type="text/javascript" src="/admin/js/PublicTrainingVideos.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    GetPublicVideos(); 

}); 
</script> 
<div class="comments"> 
    <ul> 
     <div id="TaskCommentsTableContainer"></div> 
    </ul> 
</div> 

在樣式表

（我所需要的只是自定義風格，以查看內聯）

#TaskCommentsTableContainer table { 
display: block;position:relative; 
width: 500px;} 
#TaskCommentsTableContainer table tbody{ 
display: block; 
position:relative;width:100%; min-height: 23px;} 
#TaskCommentsTableContainer table tr{ 
    display: block; 
    position:relative;width:20%;float:right}