jquery中继器布局水平查看类似youtube的项目

Question

我需要具有水平布局的jquery中继器，以便能够通过以json格式或任何所需格式返回数据库来绑定数据，并能够使用分页。有些东西像jtable，但水平布局。我想要像youtube主页布局这样的布局

Answer 1

我需要从数据库内联查看多个视频记录，就像在主页和页面中查看YouTube视频一样。。我的项目使用Web API和jquery，并使用jtable查看列表(http://jtable.org/），我无法按自己的意愿观看视频，但现在我可以使用以下

在Web 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}