jquery repeater layout horizo​​ntal查看项目和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}