I'm trying to display DataTable in my project, It works only without Layout
This is my code Layout:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title Gestion Phosphate</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<! --NAVBAR-->
<div class="row">
#RenderBody()
</div>
<footer>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
And in my view :
#model IEnumerable<wb01.Models.Réception_camions>
#*#{ Layout = null;}*#
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<div>
<table class="display" id="MyDataTable">
<thead>
<tr #*class="active" style="color:blue; background-color:black"*#>
<th>
#Html.DisplayNameFor(model => model.Date_d_arrivée)
</th>
<th>
#Html.DisplayNameFor(model => model.heure_d_arrivée)
</th>
<th>
#Html.DisplayNameFor(model => model.Poids_cam)
</th>
<th>
#Html.DisplayNameFor(model => model.Camions.N_série)
</th>
<th>
#Html.DisplayNameFor(model => model.Qualité)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Date_d_arrivée)
</td>
<td>
#Html.DisplayFor(modelItem => item.heure_d_arrivée)
</td>
<td>
#Html.DisplayFor(modelItem => item.Poids_cam)
</td>
<td>
#Html.DisplayFor(modelItem => item.Camions.N_série)
</td>
<td>
#Html.DisplayFor(modelItem => item.Qualité.Qualité1)
</td>
<td>
#Html.ActionLink("Modifier", "Edit", new { id = item.Id_rec_cam }) |
#Html.ActionLink("Détails", "Details", new { id = item.Id_rec_cam }) |
#Html.ActionLink("Supprimer", "Delete", new { id = item.Id_rec_cam })
</td>
</tr>
}
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
$("#MyDataTable").DataTable();
})
Am I missing a reference or is not in its correctly place, please help; thanks in advance.I tried to change the order of references but I got the same result even with other Views!
Am I missing a reference or is not in its correctly place, please help; thanks in advance.I tried to change the order of references but I got the same result even with other Views!
You have multiplem problems. You are loading jQuery multiple times. Once in your layout, and once in your view. Remove the reference in your view.
Your next problem is, that you put script tags directly in your view. While this might work, it is probably causing an issue with the way your scripts are loaded.
You should wrap them in #section scripts { } block, to make sure, the scripts in your view are executed after layout and view are rendered. If you take a look at your layout, you will see that #RenderSection("scripts", required: false) comes after jQuery and bootstrap have been loaded up.
All in all your view should look more like this:
#model IEnumerable<wb01.Models.Réception_camions>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<!-- html omitted-->
#section scripts {
<!--jQuery is loaded when this executes, so now we can pull in our jquery plugins-->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$("#MyDataTable").DataTable();
})
<script>
}
Related
When i use webform it works fine. but with master page it's not wroking, i provided almost all code here.
there is a textbox and a table. purpose is to Search using any keyword.
there are 3 files links which i also linked in my master page
theme.css
dashboard.css
theme.js
Here is Master Page
<html>
<head runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Master Page</title>
<link rel="icon" href="favicon.ico" type="img/ico">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.min.css" />
<link id="themecss" rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<link rel="stylesheet" type="text/css" href="css/theme.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard.css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript" src="js/theme.js"></script>
</body>
</html>
Web Form With Master Page
<%# Page Title="FJ - DashBoard | Company" Language="C#" MasterPageFile="~/AdminMaster.Master" AutoEventWireup="true" CodeBehind="Company.aspx.cs" Inherits="FJ_System.Company1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="js/Search.js"></script>
</asp:Content>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center" style="font-size: large"><i class="fa fa-list"></i>Company Details</h3>
</div>
<div class="panel-body">
<asp:TextBox ID="myInput" Style="text-align: center; font: bold; font-size: large" CssClass="form-control" placeholder="Search..." runat="server"></asp:TextBox>
<br />
<table class="table table-bordered table-striped table-responsive table-hover">
<thead style="text-align-last: center; background-color: black; color: white">
<tr>
<th>Id</th>
<th>Company</th>
<th>Adress</th>
<th>City</th>
<th>Opening Balance</th>
<th>Salesman</th>
</tr>
</thead>
<tbody id="myTable" style="text-align: center;">
<tr>
<td>1</td>
<td>Umair</td>
<td>latifabad</td>
<td>Hyderabad</td>
<td>15000</td>
<td>David</td>
</tr>
<tr>
<td>2</td>
<td>Farzan</td>
<td>Unitno4</td>
<td>Hyderabad</td>
<td>15000</td>
<td>Parker</td>
</tr>
<tr>
<td>3</td>
<td>Huzaifa</td>
<td>Malir</td>
<td>Karachi</td>
<td>20000</td>
<td>Salman</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Search.js
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Please help me to resolve this problem.
The rendered id is not always the same as you type it, especial when you add it on master page. To get the rendered on page id from <asp:TextBox ID="myInput" Style="text-align: center;... you must use the .ClientID as
$("#<%=myInput.ClientID%>").on("keyup", function () {
the full code will be
$(document).ready(function () {
$("#<%=myInput.ClientID%>").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
note that the myTable is not asp.net control, so we left it as it is
You can also read about
Accessing control client name and not ID in ASP.NET
Update
If you have this code out side of asp.net them its not going to work because you can not find the id, neither render it.
Move this javascript code inside the page, or render the ids before you load this code and use that ids in the external code like this example
How to get asp.net client id at external javascript file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="Scripts/Script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<link href="Style.css" rel="stylesheet"/>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</html>
what is the issue in the code?
not able to fecth the-rdetails of employee using ng-repeat in Angular js
i m getting this ouput Id Name Gender Salary
{{employee.id}} {{employee.name}} {{employee.gender}} {{employee.salary
what is the issue in the code?
You need to place angularjs script before controller script:
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
<script src="Scripts/Script.js"></script>
<link href="Style.css" rel="stylesheet"/>
</head>
Just Use proper flow and structuring:
var app = angular.module("myApp", []);
app.controller('myController', function($scope){
$scope.employees = [
{ id : 100,
Name : 'ONE'
},
{ id : 102,
Name : 'TWO'
}
];
console.log("hi");
console.log($scope.employees);
});
<!DOCTYPE html>
<html ng-app="myApp">
<head >
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.Name}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<link href="Style.css" rel="stylesheet"/>
<script src="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</html>
When I am trying to apply SelectedRowStyle for a gridview it is not applying. The application is using bootstrap template. Also table css I applied is table table-striped How to apply style for selected row?
You can refer below example
Use custom class for specific table.
$(".custom-table tbody tr").on('click', function() {
$('.custom-table tbody tr').removeClass("selected");
$(this).addClass("selected");
});
tr.selected {
background-color: red;
}
/* This is not necessary if your not using table-striped. */
.table-striped tbody tr.selected:nth-of-type(odd) {
background-color: red;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Bootstrap table example</title>
</head>
<body>
<table class="custom-table table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
you can do it like this, use of bootstrap active class.
$('.myTable').on('click', '.row', function() {
$(this).addClass('active').siblings().removeClass('active');
});
give active class custom css, since you are using striped table, to differentiate the selected row.
I'm testing a local site in my phone (Lumia 920), the Bootstrap 3 site shows OK, but when I access to my local site my table doesn't look responsive.
I even tried with the sample code of the Bootstrap page..
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-twttr-rendered="true">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>
Extra small devices
<small>Phones (<768px)</small>
</th>
<th>
Small devices
<small>Tablets (≥768px)</small>
</th>
<th>
Medium devices
<small>Desktops (≥992px)</small>
</th>
<th>
Large devices
<small>Desktops (≥1200px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-nowrap">Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th class="text-nowrap">Container width</th>
<td>None (auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<th class="text-nowrap">Class prefix</th>
<td><code>.col-xs-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr>
<th class="text-nowrap"># of columns</th>
<td colspan="4">12</td>
</tr>
<tr>
<th class="text-nowrap">Column width</th>
<td class="text-muted">Auto</td>
<td>~62px</td>
<td>~81px</td>
<td>~97px</td>
</tr>
<tr>
<th class="text-nowrap">Gutter width</th>
<td colspan="4">30px (15px on each side of a column)</td>
</tr>
<tr>
<th class="text-nowrap">Nestable</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th class="text-nowrap">Offsets</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th class="text-nowrap">Column ordering</th>
<td colspan="4">Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-3">
asd
</div>
</div>
</div>
</body>
</html>
What am I doing wrong?.
Thank you.
Since IE10 on WP8 has some bugs regarding its processing of <meta name="viewport" content="width=device-width">, you need to apply the WP8 IE10-specific hack detailed in the Bootstrap documentation:
Add this CSS:
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
And this JavaScript:
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style');
msViewportStyle.appendChild(
document.createTextNode(
'#-ms-viewport{width:auto!important}'
)
);
document.querySelector('head').appendChild(msViewportStyle)
}
Or you can wait for Windows Phone 8.1, where the bug is said to be fixed.
I have updated the code in below fiddle, unable to sorting the table.
I have tried tablersorter but thats not help
kindly resolve m issue.
Here is the link : jsfiddle.net/BKgue/224/
I have updated the code below.
My Code:
<head>
<title>Untitled Document</title>
<body>
<link rel="stylesheet" href="../../Downloads/mine/jQueryMobile_resources/jquery.mobile-1.3.0.min.css" type="text/css">
<script type="text/javascript" src="../../Downloads/mine/jQueryMobile_resources/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../Downloads/mine/jQueryMobile_resources/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js" ></script>
<script type="text/javascript" src="js/jquery.jquery.tablesorter.min.js" ></script>
<script type="text/javascript" src="js/jquery.jquery-latest.js" ></script>
<script type="text/javascript" src="js/jquery.jquery.metadata.js" ></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
</head>
<table data-role="table" id="table-column-toggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" >
<thead>
<tr>
<th data-priority="1">
<label>
<input type="checkbox" name="checkbox-0 "/>
</label>
</th>
<th data-priority="2">CUSTOMER</th>
<th data-priority="3">SUBJECT</th>
<th data-priority="4">STATUS</th>
<th data-priority="5">UPDATED</th>
<th data-priority="6">ASSIGNED</th>
<th data-priority="7">PRIORITY</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox" name="checkbox-0 "/>
</label>
</td>
<td>Smith</td>
<td>Sampletitme</td>
<td>open</td>
<td>Yes</td>
<td>me</td>
<td>me</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="checkbox-0 "/>
</label>
</td>
<td>Smith</td>
<td>Sampletitme</td>
<td>open</td>
<td>Yes</td>
<td>me</td>
<td>me</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="checkbox-0 "/>
</label>
</td>
<td>Smith</td>
<td>Sampletitme</td>
<td>open</td>
<td>Yes</td>
<td>me</td>
<td>me</td>
</tr>
</tbody>
</table>
When using tablesorter did you call when document is ready?:
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
Taken from: Tablesorter docs
Edit, order in the head:
<link rel="stylesheet" href="../../Downloads/mine/jQueryMobile_resources/jquery.mobile-1.3.0.min.css" type="text/css">
<script type="text/javascript" src="js/jquery.jquery-latest.js" ></script>
<script type="text/javascript" src="js/jquery.jquery.metadata.js" ></script>
<script type="text/javascript" src="../../Downloads/mine/jQueryMobile_resources/jquery- 1.9.1.min.js"></script>
<script type="text/javascript" src="../../Downloads/mine/jQueryMobile_resources/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js" ></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
The order here reflects the order the libraries are loaded in the browser, so JQuery must be loaded before any plugins for JQuery