I am using a jQuery table to show my data. There I have 2 buttons previous and next for pagination. But I want to add a scroll bar in the bottom of the table. I wrote
overflow:scroll
in CSS, but it didn't work.
Here is my code:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Query Result Page</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<link href="css/jdpicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
</head>
<body>
//this is the jQuery function for table //
<script type="text/javascript">
$(document).ready(function() {
$('#tableData').dataTable();
} );
</script>
// these are the CSS classes that will create the table look and feel
<table class="tableData context-menu-one" id="tableData" style="overflow-x: scroll ">
<thead> // this is column for tables which will contain the values from the database //
<tr style="font-size: 14px;" >
<th width="20%" align="left">Name</th>
<th width="20%" align="left">Class</th>
<th width="20%" align="left">Roll</th>
<th width="20%" align="left">Address</th>
<th width="20%" align="left">Marks</th>
</tr>
</thead>
// this is table values here we will list some values dynamically which will come from database
<tr style="font-size: 14px;" >
<th width="20%" align="left">john</th>
<th width="20%" align="left">9</th>
<th width="20%" align="left">47</th>
<th width="20%" align="left">mumbai</th>
<th width="20%" align="left">52</th>
</tr>
<tbody>
<tbody>
</tbody>
</table>
</body>
</html>
Someone please help me
The overflow property must be applied on the table container and not the table itself.
If the scrollbar is not appearing, it's because the table width is less than the container width.
Related
Hi there can someone help me, I want every keyword list, there is a google search button, and when I click on it, it will open a new browser tab, can anyone help me, I don't understand coding at all, so I ask for help here, I'm attaching a screenshot, thank you
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>TRENDING</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- <style type="text/css"> -->
<!-- h3 span { -->
<!-- font-size: 22px; -->
<!-- margin-left: auto; -->
<!-- } -->
<!-- h3 input.search-input { -->
<!-- width: 100px; -->
<!-- margin-left: auto; -->
<!-- float: right -->
<!-- } -->
<!-- .mt32 { -->
<!-- margin-top: 32px; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body class="mt32">
<!-- <div class="container"> -->
<!-- <h3> -->
<!-- <span>RESULT</span> -->
<!-- </h3> -->
<!-- </div> -->
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>
</body>
</html>
Here is an example -
note I cannot use the drawCallback but need to use on("draw" PLUS a draw() to make sure the buttons are also added on the next page of the pagination
drawCallback is called for EACH row, so this code is not useful
$table = $('table').DataTable({"drawCallback": addButtons})
The opening of the window is blocked here at SO but works in the
jsfiddle
const addButtons = settings => {
$('#dt1 tr td:nth-child(1)').html(function() {
return `<button type="button" title="google search" class="py-0 btn btn-dark btn-sm search">${this.innerText}</button>`
})
$('#dt1 tr td:nth-child(4)').html(function() {
return `<button type="button" title="google trends" class="py-0 btn btn-secondary btn-sm trends">${this.innerText}</button>`
})
};
$(document).ready(function() {
$table = $('table').DataTable();
$table.on("draw", addButtons)
$table.rows().invalidate().draw(); // not sure WHY I need to do this to have the FIRST draw trigger
$table.on("click", ".search", function() {
window.open(`https://google.com/search?q=${this.innerText}`, '_blank');
})
$('tbody').on("click", ".trends", function() {
window.open(`https://trends.google.com/trends/explore?date=now 7-d&geo=US&q=${this.innerText}`, '_blank');
})
});
.search, .trends {
width: 70%;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>BACKUP</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script>
</script>
</head>
<table id="dt1" class="table table-striped mt32 customers-list">
<thead><tr><th title="Field #1">Keyword</th>
<th title="Field #2">Products</th>
<th title="Field #3">Date</th>
<th title="Field #4">Google Trends</th>
</tr></thead>
<tbody><tr>
<td>golf just play it</td>
<td align="right">302</td>
<td align="right">1642887886267</td>
<td>golf just play it</td>
</tr>
<tr>
<td>go little rockstar tiktok</td>
<td align="right">980</td>
<td align="right">1642888240211</td>
<td>go little rockstar tiktok</td>
</tr>
<tr>
<td>gorila</td>
<td align="right">709</td>
<td align="right">1642888326752</td>
<td>gorila</td>
</tr>
<tr>
<td>google arts and culture</td>
<td align="right">23</td>
<td align="right">1642888331842</td>
<td>google arts and culture</td>
</tr>
<tr>
<td>goat case</td>
<td align="right">1099</td>
<td align="right">1642888338561</td>
<td>goat case</td>
</tr>
<tr>
<td>goth youtuber</td>
<td align="right">334</td>
<td align="right">1642888346327</td>
<td>goth youtuber</td>
</tr>
<tr>
<td>goots</td>
<td align="right">56</td>
<td align="right">1642888351273</td>
<td>goots</td>
</tr>
<tr>
<td>godlike</td>
<td align="right">360</td>
<td align="right">1642888743165</td>
<td>godlike</td>
</tr>
<tr>
<td>very good very nice</td>
<td align="right">3257</td>
<td align="right">1642889189771</td>
<td>very good very nice</td>
</tr>
<tr>
<td>navy blue and gold</td>
<td align="right">2613</td>
<td align="right">1642889973714</td>
<td>navy blue and gold</td>
</tr>
<tr>
<td>its a good day to read a book bookworm book dragon</td>
<td align="right">66</td>
<td align="right">1642889988276</td>
<td>its a good day to read a book bookworm book dragon</td>
</tr>
<tr>
<td>peach and goma teddy</td>
<td align="right">918</td>
<td align="right">1642889994665</td>
<td>peach and goma teddy</td>
</tr>
<tr>
<td>i paused the golden girls to be here</td>
<td align="right">91</td>
<td align="right">1642890006415</td>
<td>i paused the golden girls to be here</td>
</tr>
</tbody></table>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>TRENDING</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- <style type="text/css"> -->
<!-- h3 span { -->
<!-- font-size: 22px; -->
<!-- margin-left: auto; -->
<!-- } -->
<!-- h3 input.search-input { -->
<!-- width: 100px; -->
<!-- margin-left: auto; -->
<!-- float: right -->
<!-- } -->
<!-- .mt32 { -->
<!-- margin-top: 32px; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body class="mt32">
<!-- <div class="container"> -->
<!-- <h3> -->
<!-- <span>RESULT</span> -->
<!-- </h3> -->
<!-- </div> -->
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator <a target="_blank" style="font-size:70%" class="py-0 btn btn-primary btn-sm" href="//www.google.com/search?q=smooth operator">Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse <a target="_blank" style="font-size:70%" class="py-0 btn btn-primary btn-sm" href="//www.google.com/search?q=horse" >Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>
</body>
</html>
How do I create a datatables-table? I have a table, but datatables is not working (search table, pagination, dropdown and sort by).
I'm using the CDN-version of CSS and JavaScript for datatables, but it's still not working.
This is my code:
<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- DATATABLE -->
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container fluid">
<div class="row">
<div class="offset-2 col-sm-8 mt-2">
<table class="table table-hover table-striped table-bordered dataTable" id="isi">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">ID</th>
<th scope="col">Lokasi</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- START SCRIPT -->
<script type="text/JavaScript">
$(document).ready(function() {
$(#isi).dataTable();
});
</script>
<!-- Optional JavaScript -->
<!-- DATATABLE -->
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I think the problem is my CDN is not working, like link rel stylesheet or script.
jQuery needs to be loaded before Bootstrap and dataTables files as they are dependent upon$.
So,
Move jQuery, popper and bootstrap.js files above the datatables' files
Add your js code like $(document).ready() below this.
Add quotes around the jquery selector: $("#isi")
<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- DATATABLE -->
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container fluid">
<div class="row">
<div class="offset-2 col-sm-8 mt-2">
<table class="table table-hover table-striped table-bordered dataTable" id="isi">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">ID</th>
<th scope="col">Lokasi</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- DATATABLE -->
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
$("#isi").dataTable();
});
</script>
</body>
</html>
I'm having this issue with datables in Asp.net mvc; I've done a number of research and nothing that I have tried work. I'm getting this error when I use firefox TypeError: $(...).DataTable is not a function and this error when I use microsoft edge: Object doesn't support property or method 'DataTable'. Guess they have the same meaning.
Update
After following the suggestions that were given I then encounter on this error: TypeError: i is undefined
table
<table id="data" >
<thead>
<tr>
<th class="col-lg-3 tablehead">Expense Account</th>
<th class="col-lg-3 tablehead">Description</th>
<th class="col-lg-3 tablehead">Item Number</th>
<th class="col-sm-1 tablehead">Quantity</th>
<th class="col-sm-1 tablehead">UOM</th>
<th class="col-sm-1 tablehead">Cost</th>
<th class="col-sm-1 tablehead">Extended Cost</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count; i++)
{
<tr>
<td>#Html.CheckBoxFor(m => m[i].postTrnx, new { #class = "checkGroup1" })</td>
<td class="label">#Html.DisplayFor(m => m[i].requisitionNumber) </td>
<td class="label">#Html.DisplayFor(m => m[i].transactionDate)</td>
</tr>
foreach (var item in Model[i].items)
{
<tr>
<td class="col-lg-3 tabledata">#item.expense_account.account_desc</td>
<td class="col-lg-3 tabledata">#item.description</td>
#*<td class="label">#Html.DisplayFor(m => m[i].requisitionNumber) </td>*#
<td class="col-lg-3 tabledata">#item.itemNumber</td>
<td class="col-sm-1 tabledata">#item.quantity</td>
<td class="col-sm-1 tabledata">#item.selecteduomtext </td>
<td class="col-sm-1 tabledata">#item.price</td>
<td class="col-sm-1 tabledata">#item.extended_cost</td>
#*<td class="label">#Html.DisplayFor(m => m[i].transactionDate)</td>*#
<td>#Html.ActionLink("Edit", "Edit", new { id = #item.lineNum, name = Model[i].docNumber })</td>
</tr>
}
#*<tr> <td></td></tr>
<tr> <td></td></tr>
<tr> <td></td></tr>
<tr> <td></td></tr>*#
}
</tbody>
</table>
.layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - TWCL Issue Management System</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jqueryui")
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
view
#section Scripts {
<script>
$(document).ready(function () {
$('#data').DataTable();
});
</script>
}
You're using some seriously outdated stuff. I put up a jsfiddle here that is working (well, gets you past your issue). I would suspect that your script refs are not in the correct order or something.
<body>
<table id="data">
data table
</table>
</body>
$(document).ready(function() {
$('#data').DataTable();
} );
https://jsfiddle.net/2s2Lq9mh/
Based on researches I found out that there should matching td to th; that is what I used to solve the issue and now datatables is working fine.
When I try to remake this example of Group Columns: http://issues.wenzhixin.net.cn/bootstrap-table/index.html#options/group-columns.html
from the Bootstrap table documentation, I get a wrong result. The header gets duplicated and shown twice.
My code is here:
TYPE html>
<html>
<head>
<title>Group Columns</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.js"></script>
</head>
<body>
<div class="container">
<h1>Group Columns</h1>
<p>Use <code>rowspan, colspan</code> options to set the group columns header.</p>
<table id="table" data-toggle="table">
<thead>
<tr>
<th colspan="2">Item Detail</th>
<th data-field="id" rowspan="2" data-valign="middle">Item ID</th>
</tr>
<tr>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid black">1</td>
<td style="border: 1px solid black">2</td>
<td style="border: 1px solid black">3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
and it is shown in the following JSFiddle http://jsfiddle.net/mwe2ufzg/.
Try updating to bootstrap-table version 1.9.0
I got the same issue here. I found that it will generate two headers in the HTML. One is used for fixed header and another in the tbody.
I resolve it by hide the header in body.
var th = $(".fixed-table-body > thread");
th.hide();
Please, help with this situation: I have online-shop and I want to make ajax popup window when user is editing field, for example, 'quantity'. The field is part of the shop system and I can't edit him. The field look like this:
<input type="text" id="qid-110103-basket" value="1" size="3" onfocus="this.select()" onkeypress="return checkNumber(this, event, '1');">
And I want to show popup windows only on selected products, not for all.
Thank for help!
Using this way You can achieve that.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( ".dialog" ).click(function(){
$('#editQun').val($(this).html());
$('#dialog').dialog();
});
});
</script>
</head>
<body>
<table width="30%" border="1" cellpadding="1">
<tr>
<th scope="col"> <p>Quantity</p>
</th>
</tr>
<tr>
<th scope="col" class="dialog">2</th>
</tr>
<tr>
<th scope="col" class="dialog">5</th>
</tr>
<tr>
<th scope="col" class="dialog">3</th>
</tr>
</table>
<div id="dialog" title="Edit Product Quantity" style="display:none;">
<input type="text" name="editQun" id="editQun" /><br>
<small>And You can Edit this value regarding product Id Using Ajax </small>
</div>
</body>
</html>