Как преобразовать пользовательский ретранслятор в jQuery datatable?

---

я попытался преобразовать этот ретранслятор ниже в jQuery dataTable, но я не могу заставить его работать. Как мне этого добиться или есть лучший инструмент, который я могу использовать для обработки разбиения на страницы? я использую asp.net веб-форма

Что я уже пробовал:

<pre><asp:Repeater ID="RepeaterRecord" runat="server" OnItemDataBound="RepeaterRecord_ItemDataBound" ClientIDMode="Static">
                                            <HeaderTemplate></HeaderTemplate>
                                            <ItemTemplate>
                                                    <div class="single-prodcut-img  product-overlay pos-rltv">
                                                        <a href="/KB/answers/Singleproduct.aspx"?Product=<%#Eval("Product_Id") %>">  <asp:Image ID="ProductImage" runat="server" class="primary-image" ImageUrl='<%#"data:Image/jpg;base64,"+ Convert.ToBase64String((byte[])Eval("Product_Image1")) %>'/></a>
                               </div>
         <div class="prodcut-name"> <a href="/KB/answers/Singleproduct.aspx"?Product=<%#Eval("Product_Id") %>"><%#Eval("Product_Name") %></a> </div>
                                                            <div class="new-price"><%# "N" +Eval("Product_Price") %></div>

                                                </ItemTemplate>

                                            </asp:Repeater>

<script type ="text/javascript">
    $(document).ready(function () {

        $('#RepeaterRecord').prepend($("<thead></thead>").append($('#RepeaterRecord').dataTable({
            responsive: true,
            "paging": true,
            "bAutoWidth": false,
            "searching": true,
            "iDisplayLength": 5,
            "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
        });
    });
    </script>

---