使用引导表插件追加数据

在页面加载时，Symfony/Twig负责提供/呈现表中初始显示的应用了引导表的数据。使用引导表插件追加数据

用户可以单击以获得更多的记录在这一点我做的：

$table = $("#reviewTable"); 
$table.bootstrapTable('append', data);

在这种情况下，数据的结构，因为它是在这个例子中：https://github.com/wenzhixin/bootstrap-table-examples/blob/master/methods/append.html但我对许多细胞返回HTML。这种工作，但我失去了与附加行相关的表格样式。由于该样式是在单元级别完成的，因此事情并未正确居中或正确放置。

我更喜欢使用bootstrap-table内置的AJAX功能，但是我不想失去Twig提供的功能，因为我在幕后使用了Symfony2。

那些使用过这个（或类似）插件的人有什么想法吗？

来源

2016-06-11 Nicholas Kreidberg

我最终用JS解决方案替换了Twig模板和服务器端HTML代。这是我的最终代码结束了。

HTML：

<table class="table table-striped" id="tblReviewDetails" 
         data-toggle="table" data-pagination="true" 
         data-ajax="getReviewData" data-side-pagination="server" data-page-list="[10, 25, 50, 100, 250]"> 
        <thead> 
         <tr> 
          <th class="centerCell" data-field="type" data-sortable="true">Site</th> 
          <th class="centerCell" data-field="rating" id="headRating" data-sortable="true" data-width="100px">Rating</th> 
          <th data-field="content" data-width="50%">Review Content</th> 
          <th data-field="time" data-sortable="true">Date</th> 
          <th class="centerCell" data-field="author" data-sortable="true">Name</th> 
          <th data-field="url">Direct Link</th> 
         </tr> 
        </thead> 
       </table>

JS：

function getReviewData(params, offset) { 

    $.post("/extended-review-monitor/reviews", {"limit": 10, "offset": offset}) 
     .done(function (data) { 
      console.dir(data); 

      processedData = transformData(data.data); 

      console.log("processed data"); 
      console.dir(processedData); 

      setTimeout(function() { 
       params.success({ 
        total: data.data[0].total, 
        rows: processedData 
       }); 

      }, 1000); 

     }) 
     .fail(function() { 
      console.log("ajax error"); 
     }); 

    console.log("ajax complete"); 
} 

function transformData(data) { 

    var transformedArray = []; 

    for(var i = 0; i < data.length; i++) { 
     var obj = { 
      id : data[i].id, 
      type : getTemplate('type', data[i].type), 
      author : data[i].author, 
      time : data[i].time, 
      rating : getTemplate('rating', data[i].rating), 
      content : getTemplate('content', data[i].content), 
      url : getTemplate('url', data[i].url) 
     }; 

     console.log("In loop: " + i); 
     console.dir(obj); 

     transformedArray.push(obj); 
    } 

    return transformedArray; 
} 

function getTemplate(key, value) { 

    var html = ''; 

    switch (key) { 
     case "type" : 
      html = '<img src="/images/social-icons/' + value + '.png" style="height:32px;" title="' + value + '"/>'; 
      break; 
     case "rating" : 
      html = getRatingHTML(value); 
      break; 
     case "content" : 
      html = getContentHTML(value); 
      break; 
     case "url" : 
      html = '<a class="viewButton" href="' + value + '" target="_blank">View</a>'; 
      break; 
    } 

    return html; 
} 

function getContentHTML(value) { 

    var html = '<div', 
     indicator = ''; 

    if (value.length > 275) { 
     html += ' class="block-with-text"'; 
     indicator += '<div class="over-flow-indicator">[Read more]</div>'; 
    } 

    html += '>' + value + '</div>' + indicator; 

    return html; 
} 

function getRatingHTML(value) { 
    var html = '<div class="starContainer" style="min-width: 72px">'; 

    for (var i = 1; i <= 5; i++) { 
     html += '<span class="gfsStar '; 
     if (i <= value) { 
      html += 'on'; 
     } 

     html += '"></span>'; 
    } 

    html += "</div>"; 
    html += '<div class="ratingBadge">' + value + '/5</div>'; 

    return html; 
}

这种做法的伟大工程，造型+事件处理程序都保留。

来源

2016-06-19 22:55:04

使用引导表插件追加数据

回答

相关问题