I am using JQuery Data Table in my project.
I have ActionResult and getting data. I want to display data in table but if I use tbody, datatable is not styling look like normal table.
I tried without data and wrote custom tbody and tr tags. My probiem is continue. Where is my wrong ?
ActionResult
public ActionResult YayinEvleri()
{
dbContext = new DatabaseContext();
var yayinEvleri = dbContext.YayinEvi.ToList();
return View(yayinEvleri);
}
View
#model List<KitapFuari.Models.Yayinevi>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js "></script>
<script>
$(document).ready( function () {
$('#yayinEvleri').DataTable();
});
</script>
<table id="yayinEvleri" class="table table-striped table-bordered" style="width:100%" cellspacing="0">
<thead>
<tr>
<th>Yayın Evi</th>
<th>Yazar</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Ad</td>
</tr>
}
</tbody>
</table>
Add this script.
$(document).ready( function () {
$('#yayinEvleri').DataTable();
});
Related
I have a MVC.net web application.
In the view I have a List of records from my database.
The records are displayed in the following format
if (List!=null)
{
<table>
<thead>
<th></th>
</thead>
<tbody>
foreach (item in List)
if (item.startWith("AA"))
{
hide the item originally. and add class to be used by javascript/jquery to show/hide element
}
<td>Item</td>
</tbody>
</table>
}
What i want to do is put a button above the table "Show/hide"
That will hide/show some of the results when clicked.
This is oversimplified skeleton of my code. My actual table has much more information on it.
Mark the items that should be shown/hidden, e.g. with a marker CSS class. You can also set the display CSS property to hide them initially.
#{ const string markerCssClass = "js-hideable"; }
<table>
<thead>
<th></th>
</thead>
<tbody>
foreach (item in List) {
#{ var isHideable = item.StartsWith("AA"); }
<td class="#(isHideable ? markerCssClass : string.Empty)"
style="display: #(isHideable ? "none" : "block")">Item</td>
}
</tbody>
</table>
<button id="show">Show</button>
Then use jquery to show/hide these items using the marker class as selector.
<script type="text/javascript">
$('#show').on('click', function() {
var affectedElements = $('.#markerCssClass');
affectedElements.show();
});
</script>
You can do the filtering with pure CSS if you put the button BEFORE the table and either at the same level or higher.
<html>
<head>
<style>
#filter-toggle:checked ~ .filterable-table .filterable { display: none; }
</style>
</head>
<body>
<input id="filter-toggle" type="checkbox">
<label for="filter-toggle"> Filter</label>
<table class="filterable-table">
<tr class="filterable"><td>Hide me when filtered</td></tr>
<tr><td>Show me when filtered</td></tr>
</table>
</body>
</html>
I have created a table which is draggable and droppable using jQuery and I have also created textbox, which is draggable. When my textbox is dropped on a table cell, I want the cell to adjust its size according to the size of the textbox. Is this possible? Please help?
This is the code I have tried:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('input').draggable({
cancel: null
});
$('tr>td').droppable({
drop: function(event, ui) {
$(this).html('droped');
}
});
$('table').draggable({
cancel: null
});
});
</script>
<input type="text" id="draggable"></input>
<table id="droppable" border="1" style="height: 100px;width: 200px">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
This can be done like so:
https://jsfiddle.net/dqg2r6xx/
jQuery
$(document).ready(function() {
$('input').draggable({
cancel: null
});
$('#droppable td').droppable({
accept: "input",
drop: function(event, ui) {
$(this).html('droped');
}
});
$('table').draggable({
cancel: null
});
});
Problem here is that it does not attach to the table. So if you move it around, the input is still in position.
In regards to the sizing, it's adjusting the cell but not the table size. The input is wider than 100px so it stretches the cell to it's max and can do no more.
Hello I have a simple MVC autocomplete, the code I tested and it works when I create an "empty" mvc project, but when I do the exact code in intenet application it does not work, It never gets to autocomplete method. any ideas? so wired. Thank you
Home controller
static List<Students> _students = new List<Students>() {
new Students{id=1,Name="Bob", Grade="B"},
new Students{id=2,Name="Billy", Grade="A"},
new Students{id=3,Name="Mike", Grade="B"}
};
public ActionResult AutoMethod(string term)
{
//....
}
public ActionResult Index()
{
return View(_students);
}
index view
#model IEnumerable<MvcApplication1.Models.Students>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$("#searchText").autocomplete({
source: '#Url.Action("AutoMethod")'
});
});
#using (Html.BeginForm()){
#Html.TextBox("searchText");
<input type="submit" value="submit" />
}
<table>
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Grade)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Grade)
</td>
</tr>
}
Please, take a look at the resulting HTML code in your browser, probably you are referencing JavaScript files more than once. It is not advised to reference commonly used JavaScript files from views; use your _SiteLayour.cshtml or MVC's "Bundling and minification" feature instead.
Add these to top of your autocomplete code:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/excite-bike/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
And add jQuery.noConflict(); to your function:
$(function () {
jQuery.noConflict();
$("#searchText").autocomplete({
source: '#Url.Action("AutoMethod")'
});
I am developing MVC application.
I want pass the values from list to the controller,
The below code is to display the list of Products ...it shows perfectly.
#using (Html.BeginForm("Create", "Order", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmCreate" }))
{
#Html.ValidationSummary(true)
<div class="row-fluid">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Section Name</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
#foreach (var item in ViewBag.ProductList)
{
<tr>
<td >#item.SectionName</td>
<td >#item.Quantity</td>
</tr>
}
</tbody>
</table>
<span class="span12 alert alert-success" id="status-message" style="margin-bottom:10px;"><strong>Your Order has been sent to HO sucessfully.</strong>Clcik Here to check status. Please click on back button to view list.</span>
}
Now, on when I click on the above link, I want to pass the data to the method in controller.
I have written the below code, It calls the method of controller but the list doesn't contain any items. It shows the null value. how to pass the list using ajax ?
Whats wrong in code ?
<script type="text/javascript">
$(document).ready(function () {
$('#CheckOrder').click(function(){
$.ajax({
url: '#Url.Action("DATACoME")' + '?List=#ViewBag.ProductList'
}).done(function(){
//do something
});
});
</script>
Try this:
<script type="text/javascript">
$(document).ready(function () {
$('#CheckOrder').click(function(){
$.ajax({
url: '#Url.Action("DATACoME")',
data: {parameterNameFromTheController: '#ViewBag.ProductList'}
}).done(function(){
//do something
});
});
</script>
I'm trying to add a jQuery dialog in each row of a table, using jQuery, and dataTables plugin.
I want to add in the dialog data specific to each row.
I've seen in other post that you can think of two ways:
1) One dialog for each row.
2) Only one dialog for all the rows, and then fill it with specific data.
In this example, I have a list of courses in a table, with name(nombre), code(codigo), and mode(modo).
For each row, there is a button (modificar) that should show a dialog to edit the data for that course. Of course, in each dialog, must be loaded the data of that row.
My idea (viewed other ideas in other post) is to put the dialog inside the row, so I can load the data from that row.
I created a class (masInfo) and in the Javascript code, I put a function that should open the dialog after the button is. But it doesn't work.
Do you have any idea? Thanks.
HTML Y JSP
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css"
href="css/milk.css" rel="stylesheet" />
<title>Paginadores tablas</title>
</head>
<body>
<%
CatalogoCursos catalogoCursos = CatalogoCursos.getCatalogoCursos();
ArrayList<Curso> cursos = catalogoCursos.getCursos();
%>
<div id="miTabla">
<form id="formulario" name="formulario" method="post">
<table id="tabla">
<thead>
<tr>
<th>Nombre </th>
<th>Código </th>
<th>Modo de juego </th>
<th> Acción </th>
</tr>
</thead>
<tbody>
<%
for(Curso curso: cursos) {
%>
<tr>
<td><%=curso.getNombre()%></td>
<td><%=curso.getCodigo()%></td>
<td><%=curso.getStringModo()%></td>
<td>
<input type="button" class="masInfo" value="modificar"/>
<div title="Modificar curso">
<table>
<tr>
<td><input type="text" name="mod_nombre" value="<%=curso.getNombre()%>"/></td>
<td><input type="text" name="mod_codigo" value="<%=curso.getCodigo()%>"/></td>
<td><input type="text" name="mod_modo" value="<%=curso.getStringModo()%>"/></td>
</tr>
</table>
</div>
</td>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</form>
</div>
</body>
</html>
JAVASCRIPT
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
(function($) {
// Dialog
$('.masInfo').next().dialog({
autoOpen: false,
width: 600,
buttons: {
"Borrar": function() {
document.formulario.submit();
$(this).dialog("close");
},
"Cancelar": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('.masInfo').click(function(){
$('#dialog').dialog('open');
return false;
});
});
You are much better off using just one dialog and populate the relevant information in the dialog on the button click. The way you currently do it will result in a lot of duplicated input elements.
So, the HTML would look like:
<div id="miTabla">
<table id="tabla">
<thead>
<tr>
<th>Nombre </th>
<th>Código </th>
<th>Modo de juego </th>
<th> Acción </th>
</tr>
</thead>
<tbody>
<%
for(Curso curso: cursos) {
%>
<tr>
<td><%=curso.getNombre()%></td>
<td><%=curso.getCodigo()%></td>
<td><%=curso.getStringModo()%></td>
<td>
<input type="button" class="masInfo" value="modificar"/>
</td>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
<div title="Modificar curso" id="ModificarDialog">
<form id="formulario" name="formulario" method="post">
<table>
<tr>
<td><input type="text" name="mod_nombre" id="mod_nombre" /></td>
<td><input type="text" name="mod_codigo" id="mod_codigo" /></td>
<td><input type="text" name="mod_modo" id="mod_modo" /></td>
</tr>
</table>
</form>
</div>
JavaScript would change to:
(function($) {
// Dialog
$('#ModificarDialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Borrar": function() {
document.formulario.submit();
$(this).dialog("close");
},
"Cancelar": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('.masInfo').click(function(){
var cells = $(this).parent().find('td');
$('#mod_monbre').val(cells.eq(0).text());
$('#mod_codigo').val(cells.eq(1).text());
$('#mod_modo').val(cells.eq(2).text());
$('#dialog').dialog('open');
return false;
});
});