Hi all.
I have a problem with DataTables integration to MVC3 project. Over 7 hours I'm trying to fix this problem, but it's beyond my power :)
But at once a've had good result: when I created new View without masterpage and put directly to header all the jquery.dataTables.min.js file code, but when I tried to repeat this trick at the layout page header - it didn't work. So I'm out and ask you for help.
Now I'll try to explain how i did that.
Here is my Layout's page header:
And here is table building:
And script-file:
Look forward to your help.
I have a problem with DataTables integration to MVC3 project. Over 7 hours I'm trying to fix this problem, but it's beyond my power :)
But at once a've had good result: when I created new View without masterpage and put directly to header all the jquery.dataTables.min.js file code, but when I tried to repeat this trick at the layout page header - it didn't work. So I'm out and ask you for help.
Now I'll try to explain how i did that.
Here is my Layout's page header:
<head>
<meta charset="utf-8" />
<title>Example</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/themes/base/css", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/JavaScript" charset="utf8" src="../Scripts/jquery.dataTables.min.js"></script>
<script type="text/JavaScript" src="../Scripts/scripts.js"></script>
</head>
And here is table building:
<table id="campaigns-table">
<thead>
<tr class="manage-campaigns-webgrid-header">
<th id="campaign-name">Name</th>
<th id="campaign-min-price"><img src="../Images/min-price.png" alt="Minimal price per minute(cents)" title="Minimal price per minute(cents)" height="20px"></th>
<th id="campaign-max-price"><img src="../Images/max-price.png" alt="Maximal price per minute(cents)" title="Maximal price per minute(cents)" height="20px"></th>
<th id="campaign-budget"><img src="../Images/budget.png" alt="Max budget per order" title="Max budget per order" height="20px"></th>
<th id="campaign-orders">Orders</th>
<th id="campaign-status">Status</th>
<th id="campaign-delete">Delete</th>
</tr>
</thead>
<tbody>
@{
foreach (var c in ViewBag.CampaignsList)
{
<tr class="table-short-info">
<td>@Html.ActionLink((string)c.CampaignName, "EditCampaign", controllerName: "Campaign", routeValues: new { cid = c.CampaignId }, htmlAttributes: null)</td>
<td>@c.CampaignMinPrice.ToString("F")</td>
<td>@c.CampaignMaxPrice.ToString("F")</td>
<td>@c.CampaignMaxBudget.ToString("F")</td>
<td>
@Html.ActionLink((string)c.CampaignOrdersCount, "ManageOrders", controllerName: "Order", routeValues: new { cid = c.CampaignId }, htmlAttributes: null)
(@Html.ActionLink((string)c.CampaignOpenOrdersCount, "ManageOrders", controllerName: "Order", routeValues: new { cid = c.CampaignId, status = "open" }, htmlAttributes: null)|
@Html.ActionLink((string)c.CampaignClosedOrdersCount, "ManageOrders", controllerName: "Order", routeValues: new { cid = c.CampaignId, status = "closed" }, htmlAttributes: null))
</td>
<td>
<a href="@Url.Action(actionName: "ChangeCampaignStatus", controllerName: "Campaign", routeValues: new { cid = c.CampaignId, status = "open" })"><img src="~/Images/open-campaign.png" alt="Open campaign" title="Open campaign" height="16px" class="open-campaign-button" /></a>
<a href="@Url.Action(actionName: "ChangeCampaignStatus", controllerName: "Campaign", routeValues: new { cid = c.CampaignId, status = "closed" })"><img src="~/Images/close-campaign.png" alt="Close campaign" title="Close campaign" height="16px" class="close-campaign-button" /></a>
</td>
<td>@Html.ActionLink("Delete", "DeleteCampaign", new { cid = c.CampaignId })</td>
</tr>
}
}
</tbody>
</table>
And script-file:
$(document).ready(function () {
$("#campaigns-table").dataTable();
});
Look forward to your help.