如何在Symfony中使用DataTables（jQuery）和Twig？

我想在我的Symfony项目中使用jQuery DataTables插件。如何在Symfony中使用DataTables（jQuery）和Twig？

下面的代码工作：

<table width="100%" id="table_id"> 

         <thead> 
         <tr> 
          <th>Date</th> 
          <th>Salary</th> 
         </tr> 
         </thead> 

         <tfoot> 
         <tr> 
          <th>Date</th> 
          <th>Salary</th> 
         </tr> 
         </tfoot> 

         <tbody> 
          <tr> 
           <td>2011/07/25</td> 
           <td>$170,750</td> 
          </tr> 
          <tr> 
           <td>2009/01/12</td> 
           <td>$86,000</td> 
          </tr> 
          <tr> 
           <td>2011/04/25</td> 
           <td>$320,800</td> 
          </tr> 
          <tr> 
           <td>2011/07/25</td> 
           <td>$170,750</td> 
          </tr> 
          <tr> 
           <td>2009/01/12</td> 
           <td>$86,000</td> 
          </tr> 
         </tbody> 
        </table>

但我有在树枝循环产生以下代码中的问题：

  <table width="100%" id="table_id"> 
       <thead> 
       <tr> 
        <th>Date</th> 
        <th>Name</th> 
       </tr> 
       </thead> 

       <tfoot> 
       <tr> 
        <th>Date</th> 
        <th>Name</th> 
       </tr> 
       </tfoot> 

       <tbody> 
        {% for courrier in listCourrier %} 
         <tr> 
          <td>{{ courrier.DateRegister().Creation()|date('d-m-Y') }}</td> 
          <td>{{ courrier.User().Username() }}</td> 
         <tr> 
        {% endfor %} 
       </tbody> 
      </table>

表出现与良好的价值观，但我不有排序箭头。这似乎是jQuery和Twig的问题。我宁愿不使用Bundle来做到这一点（我尝试了一些捆绑包，但很难用它来做我想做的）。所以，如果你有任何想法只是简单地包含DataTable的jQuery插件，我将不胜感激。

来源

2017-04-04 cephal

如果您复制表的来源是合法的HTML？我只是问，因为这里看起来都很好。我想另一个问题是你是否包含JS和CSS？ – annoyingmouse

JS和CSS文件都包含在内，因为当我用上面的等效HTLM替换Twig生成的表格时，它完美地工作。我认为来自Twig的代码是有效的（无需排序箭头的Datatables出现），但Twig和jQuery存在明显的问题。 – cephal

你看过KnpPaginatorBundle吗？ –

您可以简单地使用jQuery的数据表所示：

$(document).ready(function(){ 
      $(document).ready(function() { 
      var data = []; 
      data.push(
       [1,"Sasha","Brenna","0800 1111"], 
       [2,"Sage","Mia","(01012) 405872"], 
       [3,"Chelsea","Allistair","076 0578 0265"], 
       [4,"Uta","Savannah","070 1247 5884"], 
       [5,"Remedios","Berk","0995 181 0007"] 
      ); 

      $('#data_table').DataTable({ 
       data: data, 
      }); 
     }); 
}); 

<table id="data_table"> 
     <thead> 
      <tr> 
       <th>Emp Code</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Mobile</th> 
      </tr> 
     </thead> 

     <tbody> 
     <!-- Dynamic Body --> 
     </tbody> 
</table>

Working Fiddle

来源

2017-04-04 06:58:31

谢谢你的回答，但我想使用从我的控制器发送到我的Twig文件的变量。你使用了data.push（），但是你知道另一个函数来获得我从控制器发送的变量，以便生成我的表的单元格吗？ – cephal

您可以从您的ajax数据源更改该数据源。它只是一个例子 –

或者你可以使用服务器端的数据表，你可以在其中直接使用控制器数据 –

如何在Symfony中使用DataTables（jQuery）和Twig？

回答

相关问题