Datatables js格式未正确应用答案

【问题标题】：Datatables js Format not getting applied properlyDatatables js格式未正确应用
【发布时间】：2014-12-20 07:09:10
【问题描述】：

我正在尝试在 asp.net 网格视图上应用 Datatables js。问题是我有大量的列。当列数很大时，它不会正确呈现 css。显示排序的箭头在标题上也不可见。

请看截图。

请建议我解决此问题的解决方案，以便将控件呈现在适当的位置以进行分页和搜索。

 <asp:GridView ID="gvReport" runat="server" ClientIDMode="Static" CssClass="table table-bordered table-hover"
            GridLines="None" AutoGenerateColumns="false" OnPreRender="gvReport_PreRender" Width="100%">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <a class="fancybox" href='<%#string.Format("/Images/PRODUCT/{0}",Eval("ProdImagePath")) %>'>
                            <img src="Content/images/Image.png" height="20" width="20" /></a>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <img src="Content/images/View.png" style="cursor: pointer;"
                            onclick="OpenModalPopUp('<%#string.Format("/Images/PAGE/{0}",Eval("PageImagePath")) %>','<%#string.Format("/Images/PRODUCT/{0}",Eval("ProdImagePath")) %>')" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <a class="fancybox" href='<%#string.Format("/Images/PAGE/{0}",Eval("PageImagePath")) %>'>
                            <img src="Content/images/Page.png" /></a>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="Account" DataField="account" />
                <asp:BoundField HeaderText="Period" DataField="period" DataFormatString="{0:d}" />
                <asp:BoundField HeaderText="End Date" DataField="end_date" DataFormatString="{0:d}" />
                <asp:BoundField HeaderText="Start Date" DataField="start_date" DataFormatString="{0:d}" />
                <asp:BoundField HeaderText="Days" DataField="number_of_days" />

                <asp:BoundField HeaderText="Collection" DataField="collection_type" />
                <asp:BoundField HeaderText="Week" DataField="weeks" />
                <asp:BoundField HeaderText="Category" DataField="Category" />
                <asp:BoundField HeaderText="Market" DataField="Market" />
                <asp:BoundField HeaderText="Brand" DataField="Brand" />
                <asp:BoundField HeaderText="Size" DataField="Size" />
                <asp:BoundField HeaderText="Pur_Qty" DataField="Pur_Qty" />
                <asp:BoundField HeaderText="Description" DataField="Product_Description" />
                <asp:BoundField HeaderText="Sale Price" DataField="Sale_Price" />
                <asp:BoundField HeaderText="Reg. Price (Low)" DataField="Reg_Price_Low" />
                <asp:BoundField HeaderText="Unit Price Sale" DataField="Unit_Price_Sale" />
                <asp:BoundField HeaderText="NOR Price" DataField="NOR_Price" />
                <asp:BoundField HeaderText="% OFF" DataField="percente_off" />
                <asp:BoundField HeaderText="Reg. Price High" DataField="Reg_Price_High" />
                <asp:BoundField HeaderText="Retail Coupon" DataField="Retail_Coupon" />
                <asp:BoundField HeaderText="Mfr Coupon" DataField="Mfr_Coupon" />
                <asp:BoundField HeaderText="Limit" DataField="Limit" />
                <asp:BoundField HeaderText="Events" DataField="Events" />
                <asp:BoundField HeaderText="Save Up To" DataField="Save_Up_To" />
                <asp:BoundField HeaderText="Ad Type" DataField="Ad_Type" />
                <asp:BoundField HeaderText="Theme" DataField="Theme" />
                <asp:BoundField HeaderText="Offer Desc" DataField="Offer_Description" />
                <asp:BoundField HeaderText="Page Position" DataField="Page_Position" />
                <asp:BoundField HeaderText="Promotions" DataField="Promotions" />
                <asp:BoundField HeaderText="Manufacturer" DataField="Manufacturer" />
                <asp:BoundField HeaderText="Retailer Points" DataField="Retailer_Points" />
                <asp:BoundField HeaderText="Week Month" DataField="Week_Month" />
                <asp:BoundField HeaderText="Master Brand" DataField="Master_Brand" />
                <asp:BoundField HeaderText="Year" DataField="Year" />
                <asp:BoundField HeaderText="Brand_Family" DataField="Brand_Family" />
                <asp:BoundField HeaderText="Region" DataField="Region" />
                <asp:BoundField HeaderText="Size Segmentation" DataField="Size_Segmentation" />
            </Columns>
        </asp:GridView>

数据表js：

  $("#gvReport").DataTable({ "iDisplayLength": 100, "scrollX": true });

【问题讨论】：

检查它需要一个类名 apply class 并完成您的新属性！
但这件事应该自动完成吧？它适用于少量列。
可以加一个demo吗？
怎么做？我已经在这里发布了我的代码。你可以在这里看到datatables.net
使用 jsfiddle 粘贴您的数据，然后在此处粘贴链接

标签： jquery css asp.net jquery-datatables

【解决方案1】：

如果有人陷入这种情况，这里的解决方案对我有用。

在处理 .Net 应用程序时，我创建了数据表 js 和 css 的捆绑包。当我尝试使用捆绑包包含 css 时，页面渲染时文件没有被包含在内。（从萤火虫网络标签得知）。我尝试在 aspx 页面上以传统方式包含该文件，并且效果很好。

不知道为什么捆绑的东西不适合我。

希望这对某人有所帮助。

谢谢

【讨论】：