I have used bootgrid for my website after having issues on rendering table by datatables. Bootgrid render the table well. The table becomes a data grid with it and not like with datatables as i asked from a previous question. But after bootgrid renders the table all the values become 0s. Why is that ? Is there any solution to fix this ?
I just used this piece of code
$( document ).ready(function() {
$('#data_table').bootgrid();
});
I'm referencing JQuery with this
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
If you are loading bootgrid with data provided to it, then you have to add "data-column-id" attribute to the column.
for example: for column Sender, table structure should be like this:
<table id="data_table">
<thead><tr>
<th data-column-id="sender">Sender</th>
</tr>
</thead>
</table>
Related
I,am designing cshtml pages using
As per the instructions given here, https://github.com/Mobius1/Vanilla-DataTables
I have added CSS and JS files appropriately,
CSS
<link href="https://unpkg.com/vanilla-datatables#latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">
JS
<script src="https://unpkg.com/vanilla-datatables#latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>
I tried to initialize the table in my index page by calling below code in my cshtml index page
<script>
var table = new DataTable("table");
</script>
Also tried
<script>
var table = new DataTable("#datatable");
</script>
where table is my table class name and datatable is the id of the table. But nothing shows up. Please let me know if you require any additional details. I,am using .net core and bootstrap in MVC architecture.
Edit
Based on the provided answer, I ended up using simple datatables from referred in the same Github repo as a solution which is the latest iteration of vanilla datatables:
https://github.com/fiduswriter/Simple-DataTables
And initialised using below script at bottom of the cshtml page:
<script src="https://cdn.jsdelivr.net/npm/simple-datatables#latest"></script>
<script>
// Simple Datatable
var mytable = document.querySelector('#datatable');
var dataTable = new simpleDatatables.DataTable(mytable,{
//Enter any additional config details required here if required. Else Leave Blank
});
</script>
The Vanilla-DataTables repo you linked to has several links with examples using their scripts.
The value used in the DataTable .ctor appears to be the class name of the HTML table(s) to bind Vanilla-DataTables.
So, in your example, if you use:
<script>
var table = new DataTable("table");
</script>
Then you need to have an HTML table with a css class named table:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Ext.</th>
<th>City</th>
<th data-type="date" data-format="YYYY/MM/DD">Start Date</th>
<th>Completion</th>
</tr>
</thead>
<tbody>
<tr><td>Unity Pugh</td><td>9958</td><td>Curicó</td><td>2005/02/11</td><td>37%</td></tr>
<tr><td>Theodore Duran</td><td>8971</td><td>Dhanbad</td><td>1999/04/07</td><td>97%</td></tr>
<tr><td>Kylie Bishop</td><td>3147</td><td>Norman</td><td>2005/09/08</td><td>63%</td></tr>
<tr><td>Alisa Horn</td><td>9853</td><td>Ucluelet</td><td>2007/01/11</td><td>39%</td></tr>
<tr><td>Zelenia Roman</td><td>7516</td><td>Redwater</td><td>2012/03/03</td><td>31%</td></tr>
</tbody>
</table>
Source: Vanilla-DataTable Demos > Default Setup
I am trying to sort the table data. I am able to sort the data of the column onClick using a doSort function in Javascript but couldn't sort the data default on table load
Any ideas?
<thead>
<tr>
<th class="sortcol sortasc" onclick="doSort(0);">Code</th>
<th class="sortcol sortasc" onclick="doSort(1);">Name</th>
</tr>
Thanks for your time !!
If you're not using jquery or a table sorting library, then you need to rely on when the browser signals that it's finished loading, and then call your own sorting method. Something like this in your page should get you started:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
doSort(0);
});
</script>
I am developing a web application where I need Column's name of grid view using javascript. After that, display this column's name on Div.
Please help me out this.
There is no standard way to do so. GridView is nothing but a html table at runtime. So best you can do is to grab this table through javascript and grab its columns.
Suppose, you have declared your gridview like this:
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
and have bound it at runtime like this:
DataTable dt= new DataTable();
db.Columns.Add("Col1");
db.Columns.Add("Col2");
db.Rows.Add("one", "two");
GridView1.DataSource = dt;
GridView1.DataBind();
then at runtime, a markup like below is generated for your gridView
<table cellspacing="0" rules="all" border="1" id="GridView1"
style="border-collapse:collapse;">
<tr>
<th scope="col">Col1</th>
<th scope="col">Col2</th>
</tr>
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>
so clearly, columns are the th elements in the GridView table, which you can easily grab through javascript like below:
var table = document.getElementById('GridView1');
var headers = table.getElementsByTagName('th');
for(var i=0;i<headers.length;i++)
{
alert(headers[i].innerText);
//or append to some div innerText
}
see this fiddle on how to grab table elements
GridView is rendered as HTML table on your page source, hence you can use Jquery to get the , view source and check if its associated with any class and then you can use it as selector, or regular $('table tr th') this post may help you How to get a table cell value using jQuery?
I want to create a html page that get data from a website table (not a database table -html one)
The code looks sorda like this:
http://jsfiddle.net/wpVtc/
I tried to use jQuery ".find" but I couldn't get it to work.
It dosn't have ANY classes of id's .
Then, when I get the data I want to display only that.
Thank u!
~Stephan
EDIT:
The data is always going to be at the same place and it as always going to end with either 'GB' or 'MB'.
If the data is always in the same position you could use .eq(n).
So if you example is:
<table>
<tr>
<tr> <--- i assume this is wrong
<td>
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>DATA I WANT</tr>
the selector would be:
"table tr td table tr:eq(6)"
See: http://api.jquery.com/eq-selector/
Another solution:
"table tr td table tr:contains(DATA I WANT)"
See: http://api.jquery.com/contains-selector/
I am using MVC 3, EF Model First on my project.
In my View I have 4 tables that look likes these.
<div class="questionsForSubjectType">
<table>
<thead>
<tr>
<th>
Title
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
test
</td>
</tr>
</tbody>
</table>
</div>
users should be able to select and add to another table lets say the table is following:
<table id="CustomPickedQuestions>
/* <----- Questions that users chose from the other tables /*
</table>
What I am looking for is that when a users click on a row, the row shall get removed and added to the CustomPickedQuestions, When the row is added to that table, the user should also be able to remove it from CustomPickedQuestions Table and then that row shall go back to the Table it was before.
I now wonder how I can accomplish this with help of client-side jquery scripting.
You've got far too much irrelevant complexity in you code (for the specific question you ask). The title is good, but not the code. Rather than posting your complex project code, create the simplest possible reproduction of the problem using the least amount of code/methods/properties (with common names, that is ProductID, ProductName, etc). part 3 of my tutorial shows how to do this. See http://www.asp.net/mvc/tutorials/javascript/working-with-the-dropdownlist-box-and-jquery/adding-a-new-category-to-the-dropdownlist-using-jquery-ui