自定义ASP.NET的DataList控件的HTML输出

Question

如何以下列格式生成DataList控件的输出？

<ul id="container">
    <li data-genre="cricket"> Cricket Sport </li>
    <li data-genre="boxing"> Boxing Sport </li>
    <li data-genre="Swimming"> Swimming Sport </li>
    <li data-genre="Kite"> Kite Sport </li>
</ul>

为什么我需要生成这样的因为我需要应用以下JQuery插件 https://luis-almeida.github.io/filtrify/music.html

以下是DataList代码。我将这个List对象放在服务器端

<asp:DataList ID="dlSports" runat="server" RepeatColumns="6" CellSpacing="5" RepeatLayout="Table" >
<ItemTemplate>
       <image> Image will display here</image> 
       <span><%# Eval("SportName") %></span>
</ItemTemplate>                    
</asp:DataList>

我正在使用DatList，因为我需要以表格形式显示数据，如https://luis-almeida.github.io/filtrify/music.html中所示。

-------编辑----------- HTNL输出就像这样。

<table id="MainContent_dlSports" cellspacing="5" class="text-center" style="height:100%;width:100%;">
 <tr>
        <td>
                    <li>
                        <image> ....</image> 
                     <span>Cricket Sport</span>
                    </li>
                </td>
        <td>
                    <li>
                        <image> ....</image> 
                     <span>Boxing Sport</span>
                    </li>
                </td>
               <td>
                    <li>
                        <image> ....</image> 
                     <span>Swimming Sport</span>
                    </li>
                </td>
</tr>
          .......
          .......
          .......
</table>