سلام وقتتون بخیر

من اولین بار هست که میخوام از قالب html آماده بوت استرپی برای پنل مدیریتم استفاده کنم

تمام بخش های قالب رو فارسی کردم و مرتب دارم استفاده میکنم تنها بخشی که هر کاری میکنم درست نمیشه جدول لیست مطالب هست!!!

این کد جدول هست:

<table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                        <tr>
                                            <th>Rendering engine</th>
                                            <th>Browser</th>
                                            <th>Platform(s)</th>
                                            <th>Engine version</th>
                                            <th>CSS grade</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="odd gradeX">
                                            <td>Trident</td>
                                            <td>Internet Explorer 4.0</td>
                                            <td>Win 95+</td>
                                            <td class="center">4</td>
                                            <td class="center">X</td>
                                        </tr>
                                                   <tr class="gradeU">
                                            <td>Other browsers</td>
                                            <td>All others</td>
                                            <td>-</td>
                                            <td class="center">-</td>
                                            <td class="center">U</td>
                                        </tr>
                                    </tbody>
                                </table>

این هم خروجی جدول هست:

درواقع اون شماره بندی صفحات و فیلد جستجو و کلا کنترل هاش اصلا html نوشته نشده و  JavaScript هستن که به نظرم خیلی هم دقیق و عالی کار میکنن. الان 2 روزه که روش وقت گذاشتم تازه موفق شدم این 15.000 خط JavaScript رو به صورت زیر ادیت کنم و فارسی کنم:

توی تصویر بالا محتوا رو با Repeater میخونه که مرتب هست. درواقع کد به این صورته:

<table class="table table-striped table-bordered table-hover rtl text-center" id="dataTables-example">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">#</th>
                                                    <th class="text-center">عنوان روزنوشته</th>
                                                    <th class="text-center">تاریخ درج</th>
                                                    <th class="text-center">تاریخ آخرین بروزرسانی</th>
                                                    <th class="text-center">ویرایش</th>
                                                    <th class="text-center">حذف</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <asp:Repeater ID="Repeater1" runat="server">
                                                    <ItemTemplate>
                                                        <tr class="odd gradeX">
                                                            <td><%# Eval("id") %></td>
                                                            <td><%# Eval("title") %></td>
                                                            <td><%#Eval("datereg","{0: dddd - dd MMMM yyyy}") %></td>
                                                            <td><%#Eval("dateupdate","{0: dddd - dd MMMM yyyy}") %></td>
                                                            <td><a href="#" class="btn btn-primary"><i class="fa fa-edit "></i> ویرایش</a></td>
                                                            <td><a runat="server" id="delete" onclick="" class="btn btn-danger"><i class="fa fa-pencil"></i> حذف</a></td>
                                                        </tr>
                                                    </ItemTemplate>
                                                </asp:Repeater>
                                            </tbody>
                                        </table>

اما خب صد در صد اینجا Repeater اصلا به درد نمیخوره. حتما یا باید دیتالیست داشته باشم یا باید از گرید استفاده کنم. اما متاسفانه وقتی که دیتالیست قرار میدم کاملا به هم میریزه به شکل زیر :((((

تمام کنترل ها مخفی میشن و جدول هم به هم میریزه. البته دلیلش اینه که حتما باید id تگ table مقدار dataTables-example باشه اما این id رو به دلیل اینکه داخلش "دَش" داره نمیشه برای datalist قرار داد.

کدش رو به صورت زیر نوشتم:

<asp:DataList CssClass="table table-striped table-bordered table-hover rtl text-center" ID="DataList1" runat="server" OnItemCommand="DataList1_ItemCommand">
                                            <HeaderTemplate>
                                                <tr>
                                                    <th class="text-center">#</th>
                                                    <th class="text-center">عنوان روزنوشته</th>
                                                    <th class="text-center">تاریخ درج</th>
                                                    <th class="text-center">تاریخ آخرین بروزرسانی</th>
                                                    <th class="text-center">ویرایش</th>
                                                    <th class="text-center">حذف</th>
                                                </tr>
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <tr class="odd gradeX">
                                                    <td><%# Eval("id") %></td>
                                                    <td><a target="_blank" href="<%# string.Format("../../single.aspx?id={0}",Eval("id")) %>"><%# Eval("title") %></a></td>
                                                    <td><%#Eval("datereg","{0: dddd - dd MMMM yyyy}") %></td>
                                                    <td><%#Eval("dateupdate","{0: dddd - dd MMMM yyyy}") %></td>
                                                    <td>
                                                        <asp:LinkButton ID="LinkButton1" CommandName="edit" CommandArgument='<%# Eval("id") %>' CssClass="btn btn-primary" runat="server"><i class="fa fa-edit "></i>ویرایش</asp:LinkButton></td>
                                                    <td>
                                                        <asp:LinkButton ID="LinkButton2" CommandName="delete" CommandArgument='<%# Eval("id") %>' CssClass="btn btn-danger" runat="server"><i class="fa fa-pencil"></i>حذف</asp:LinkButton></td>
                                                </tr>
                                            </ItemTemplate>
                                        </asp:DataList>

راه چاره چیه؟ چیکار باید بکنم؟