Quantcast
Viewing all articles
Browse latest Browse all 82140

Two Tables in 1 View (Multiple Issues)

Hi,
I am developing a c#.Net MVC4 application. I've created two datatables which are each located in separate partial views. Both partial views (PartialView1) and (PartialView2) are then loaded and displayed together in another view.

My problems are that: *FixedColumn functionality is not working for either table
*Sometimes one table will be correctly constrained to the div element boundaries in which its located and other times it
will stretch across the entire page (appears to occur randomly, this happens to both tables but it is always only one or
the other)
*First table always displays a footer with the selectable pages 1 & 2 although pagination is set to false
(this never occurs for the 2nd table)

Ive used firebug and inspect element in Chrome but do not see any script errors other than the one regarding the browser check incompatibility that is being fixed in the most current build of FixedColumn.



My debugger reference: ojoveq

I'm not familiar with how to use DataTables live or JS Fiddle to test my problems.

Table 1 Code:

<script type="text/javascript"  src="../../Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript"  src="../../Scripts/DataTables-1.9.4\extras\FixedColumns\media\js\FixedColumns.min.js"></script>
<script type="text/javascript"  src="../../Scripts/DataTables-1.9.4\media\js\jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        var oTable1 = $('#example1').dataTable({
            "sScrollX": "0",
            "sScrollY": "200px",
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false, 
            "bAutoWidth": false

        });
        new FixedColumns(oTable1, {
            "iLeftColumns": 1,
            "iLeftWidth": 200
        });
    });
    </script>

Table 2 Code:

<script type="text/javascript"  src="../../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript"  src="../../Scripts/DataTables-1.9.4\extras\FixedColumns\media\js\FixedColumns.min.js"></script>
<script type="text/javascript"  src="../../Scripts/DataTables-1.9.4\media\js\jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        var oTable = $('#example').dataTable({
            "bPaginate": false,
            "sScrollX": "0",
            "sScrollY": "200px",
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false, 
            "bAutoWidth": false
            

        });
        new FixedColumns(oTable, {
            "iLeftColumns": 1,
            "iLeftWidth": 200
        });
    });
    </script>

Combined View Code:

 @if(ViewBag.SearchKey != null)
    {
        <div>
     @Html.Action("PartialView1", "Home", (string)ViewBag.SearchKey)
       </div>
        <p style="clear:both; margin-top:4em; font-weight: bold;">
        </p>
       <div>
     @Html.Action("PartialView2", "Home", (string)ViewBag.SearchKey)
       </div>
     }

Viewing all articles
Browse latest Browse all 82140

Trending Articles