JQuery DataTable style not working - css

I'm trying to add jquery data tables to a simple aspx page. Did this before a couple times but this website that I'm adding it to now has some CSS that is getting inherited.
So I took the generated HTML and removed the CSS that was getting added to it.
My page still does not style properly!
Here is my HTML.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.dataTables.min.js"></script>
<link href="CSS/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<link href="CSS/demo_page.css" rel="stylesheet" />
<link href="CSS/demo_table.css" rel="stylesheet" />
<link href="CSS/demo_table_jui.css" rel="stylesheet" />
<link href="CSS/jquery.dataTables.css" rel="stylesheet" />
<link href="CSS/jquery.dataTables_themeroller.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$("#gvMain").prepend($("<thead></thead>").append($(this).find("tr:first"))).
dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});
</script>
<div>
<form>
<table id="gvMain">
<tr>
<th scope="col">Some Id</th>
</tr>
<tr class="gridItem">
<td>297</td>
</tr>
<tr class="gridAlternatingItem">
<td>296</td>
</tr>
<tr class="gridItem">
<td>295</td>
</tr>
<tr class="gridAlternatingItem">
<td>295</td>
</tr>
<tr class="gridItem">
<td>294</td>
</tr>
<tr class="gridAlternatingItem">
<td>294</td>
</tr>
<tr class="gridItem">
<td>293</td>
</tr>
<tr class="gridAlternatingItem">
<td>293</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
It looks like below
I have spent hours trying to get it to work but no luck. It is in the main directory of the existing site though. But that should not matter right coz the HTML does not have anything included in it.
This is the screenshot of four errors that are showing in the above screenshot. It is nothing but some missing images/css files.


You have to add the <thead> and <tbody> tag
Here is example of table:
<table id="gvMain">
<thead>
<tr>
<th scope="col">Some Id</th>
</tr>
</thead>
<tbody>
<tr class="gridItem">
<td>297</td>
</tr>
<tr class="gridAlternatingItem">
<td>296</td>
</tr>
<tr class="gridItem">
<td>295</td>
</tr>
<tr class="gridAlternatingItem">
<td>295</td>
</tr>
<tr class="gridItem">
<td>294</td>
</tr>
<tr class="gridAlternatingItem">
<td>294</td>
</tr>
<tr class="gridItem">
<td>293</td>
</tr>
<tr class="gridAlternatingItem">
<td>293</td>
</tr>
</tbody>
</table>

Related

How to disable Button inside collapse datatable

My goal is to disable buttons in column index 5 when i click then button "Disable datatable button"
base on image example.
when I try to collapse( column index 5 shows) my code works disable the button, but the problem is when column index 5 does not show it doesn't work anymore.
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.dataTables.min.css">
<div class="row">
<button id="btn">Disable datatable button</button>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>BUTTON</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>
<button type="button">
Disable me
</button></td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
<script>
$(document).ready(function () {
$('#example').DataTable({
paging: false,
ordering: false,
info: false,
responsive:true
});
});
</script>
Expect to disable button when column is hiding.

I can't get my CSS File to Load in my Razor Pages (ASP.Net Core)

I have the following syntax in my _Layout.cshtml:
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link href="~/lib/datatables/css/dataTables.bootstrap4.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
<link href="~/lib/jqueryui/jquery-ui.css" rel="stylesheet" />
<script src="~/lib/tinymce/tinymce.min.js"></script>
<link href="~/content/site.css" rel="stylesheet" />
</head>
I can see the ~/content/site.css in the Page Source but the styles isn't being applied. The site.css only has one entry as follows:
.table-hover tbody tr:hover td {
background: #48b9e5;
}
If I manually add the style to my Razor Page via the tag it works just fine. What am I missing?
--- Val

Here is a demo:
Tasks.cshtml(You need to put css between <style></style>):
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Here is my _Layout.cshtml:
Here is html of Tasks.cshtml:
Here is Network of Tasks.cshtml:
result:

it seems that css file can't override styles used in bootstrap or other liberary
try this background: #48b9e5 !important;

Reduce space between alignment of HTML tables

How can I reduce the space between the parallel tables for the below code? The look and feel looks a bit odd where the data grid tables are placed at the extreme ends of the page alignment.
Can anyone suggest how can I manage the alignment for the tables to reduce the space of the tables placed at each of the extreme ends left hand and right hand side?
Note: Copy the code in a notepad and save it as test.html extension and open in IE or Firefox to check the alignment problem I have discussed above.
Here is the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Server status</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body><br/><br/><br/><br/>
<div style="float:right;"><table id="ll" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:bottom;"><table id="gg" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div><br/><br/><br/>
<div style="float:left;"><table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:right;"><table id="vv" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
</body>
</html>

Please Replace your code by below code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Server status</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body><br/><br/><br/><br/>
<div style="width:780px; overflow:hidden; margin:0 auto; margin-bottom:20px;">
<div style="float:right;">
<table id="ll" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:left;">
<table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
</div>
<div style="width:780px; overflow:hidden; margin:0 auto; ">
<div style="float:left;">
<table id="gg" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:right;">
<table id="vv" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

Footable 2 Select rows

I'm using FOOTABLE to create job board. What I want to add is a checkbox option to select jobs (rows) so users can send cv to multiple jobs at once. Any idea on how to implement this in existing table?
simple example:
<table class="footable toggle-arrow" data-page-size="20" >
<thead>
<tr>
<th><!--select option id col--></th>
<th><span>Job Description</span></th>
<th><span>Area</span></th>
<th><span>Number</span></th>
<th><!--TYPE--></th>
<th><!--SEND--></th>
</tr>
</thead>
<tbody>
<tr><!---JOB-->
<td><input type="checkbox" value="id"></td>
<td>job description value</td>
<td>area value</td>
<td>job number</td>
<td data-value="4566">4566</td>
<td data-value="3"><img title="hot" src="vip.png" /></td>
<td></td>
</tr><!---END JOB-->
</tbody>
Thanks!

Here's a quick example of one way you could do this:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<a id="sendSelectedButton" href="#">Send Selected</a>
<table id="theTable">
<thead>
<tr>
<th></th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 1</td>
<td>send
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 2</td>
<td>send
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 3</td>
<td>send
</td>
</tr>
</tbody>
</table>
<script>
function sendRows(rows) {
if (rows === undefined ||
rows === null ||
rows.length === 0)
return;
//Do stuff to send rows here.
}
$(document).ready(function() {
$("#sendSelectedButton").on("click", function() {
var checkRows = $("#theTable").find("tbody tr").has("input:checked");
sendRows(checkRows);
});
$("table").on("click", "tr a", function() {
var row = $(this).parents("tr");
sendRows(row);
});
});
</script>
</body>
</html>
Here's a plunk with the same code: http://plnkr.co/edit/tK4WpCvV7vSjVFmKlJIx
I didn't add any Footable here because it doesn't seem like that Footable will affect it one way or another.
I think you'll find that things quickly get a lot more complex as your application matures. I'd suggest you look some type of data binding. I personally use Knockout.js. Even if you don't decide to use Knockout.js, I think their tutorial is pretty cool. (http://knockoutjs.com/index.html)

CSS file IE firefox chrome

In my css file I have the following code and want it to applied on caption of my table
caption
{
color:green;
font-style:bold;
}
my html file
<html> <head>
<link href="mystyles.css" rel="stylesheet" type="text/css" />
<title>Home Page - My Schedule</title> </head> <body>
<center> <h2>write your name here...</h2>
Home Page My CV My Schedule My Courses Banner Links Frames
<br/> <table border="1" width="800" height="300" align="center"> <caption><h3>My Schedule</h3></caption>
<br/> <thead> <tr align="center"> <td><img src="img3.jpg" alt="" width="200" height="280"></td> <td colspan="4"><center><h4>write your name here - level 4</h4> </td> </tr> </thead> <tr align="center"> <td>1</td> <td>Web Design</td> <td bgcolor="#C0C0C0" >Off</td> <td colspan="2">management</td> </tr> <tr align="center"> <td>2</td> <td>management</td> <td bgcolor="#C0C0C0" colspan="3">Off</td> </tr> <tr align="center"> <td>3</td> <td bgcolor="#C0C0C0">Off</td> <td >management</td> <td colspan="3">management</td> </tr> <tr align="center"> <td>4</td> <td>Web Design</td> <td>management</td> <td>math</td> <td bgcolor="#C0C0C0">Off</td> </tr> <tr align="center"> <td>5</td> <td bgcolor="#C0C0C0" colspan="4">Off</td> </tr> </table>
Go Back </center> </body> </html>
but the problem is that code working fine on IE but not working on Firefox and Chrome. I tried to clear cache but nothing help.
Secondly, I have my website in the following path
C:\Users\user\Desktop\My Website
and my css file in the following path
C:\Users\user\Desktop\My Website\styles
and I am not able to link css file when its in this subfolder
I tried the following code
<link href="../mystyles.css" rel="stylesheet" type="text/css" />
<link href="../styles/mystyles.css" rel="stylesheet" type="text/css" />
but not working.

Replace
<link href="mystyles.css" rel="stylesheet" type="text/css" />
With
<link href="styles/mystyles.css" rel="stylesheet" type="text/css">
You haven't told your HTML file that the mystyles.css file is in the styles folder.
FYI..
<link href="../mystyles.css" rel="stylesheet" type="text/css" />
Would be C:\Users\user\Desktop\mystles.css
and
<link href="../styles/mystyles.css" rel="stylesheet" type="text/css" />
Would be C:\Users\user\Desktop\styles\mystles.css

Resources