Data Table basic configuration and style
Data Table basic configuration and style
midland
Posts: 15Questions: 2Answers: 0
Hi,
I am new to MVC and almost zero experience with Jquery. I have downloaded DataTable 1.9.4 and was able to get "zero configuration" working. I read somewhere that the table should have alternate row colors and has table borders. However, this is not for my table. Another question is how to set column width. My column headers and data cells are wrapped into multiple lines of text. How do I make cells and headers single lines. At this time, I want to have a simple table with alternate row color, table border, row/cell with single line of text.
Your help in configuration and style is very much appreciated. Any recommendation for a good tutorial for a beginner?
Hugh
Below is the code in Index.cshtml:
@section scripts{
$(document).ready(function () {
$('#myDataTable').dataTable(
{
"bFilter":true,
"bSort": true,
"bInfo":false
});
});
}
And for the table:
column headers .
@foreach (var item in Model)
{
data
}
I am new to MVC and almost zero experience with Jquery. I have downloaded DataTable 1.9.4 and was able to get "zero configuration" working. I read somewhere that the table should have alternate row colors and has table borders. However, this is not for my table. Another question is how to set column width. My column headers and data cells are wrapped into multiple lines of text. How do I make cells and headers single lines. At this time, I want to have a simple table with alternate row color, table border, row/cell with single line of text.
Your help in configuration and style is very much appreciated. Any recommendation for a good tutorial for a beginner?
Hugh
Below is the code in Index.cshtml:
@section scripts{
$(document).ready(function () {
$('#myDataTable').dataTable(
{
"bFilter":true,
"bSort": true,
"bInfo":false
});
});
}
And for the table:
column headers .
@foreach (var item in Model)
{
data
}
This discussion has been closed.
Replies
> Another question is how to set column width.
Use sWidth or columns.width in 1.10.
> My column headers and data cells are wrapped into multiple lines of text. How do I make cells and headers single lines.
CSS: `th, td { white-space: nowrap; }` .
As for the row stripes - we'd need to see the page to know why it isn't working.
Allan
Thanks very much for your help. I will read the document you recommended. I tried your suggestions, they did not work, and error message popped up and column "Date Submitted" with ("white-space:nowrap") was out of place to under the page title. All column widths not affected. Below is "Index.cshtml". Sorry, I can not show you the real website since it is intranet. Can I include a file that contains error message and screen shut? I will try to edit original file to include file.
Thanks again for your help.
Hugh
@model List
<!DOCTYPE html>
@section scripts{
$(document).ready(function () {
$('#requestDataTable').dataTable(
{
"columns.width":1.10
});
});
}
Requests
@Html.ActionLink("Create New", "Create")
Request
Requestor
Proteins
Department
PMO Project
Project Type
Status
Purpose
Tissue
Charac.
Date Submitted
Comment
Lab Comment
@foreach (var item in Model)
{
@Html.ActionLink("Edit", "Edit", new { id = item.RequestID }) |
@Html.ActionLink("Copy", "Edit", new { id = item.RequestID })
@item.RequestName
@item.Requestor
@item.ProteinNames
@item.Department
@item.PMOProject
@item.LabProjectType
@item.Status
@item.Purpose
@item.TissueType
@item.Characteristic
@item.DateCreated.ToShortDateString()
@item.Comment
@item.LabComment
}
The error message and screen shut
I tried again with column.width only. No error message and not working. Below is the code in Index.cshtml: There are 14 columns in the table.
Thanks very much.
Hugh
@section scripts{
$(document).ready(function () {
$('#requestDataTable').dataTable(
{
"bPaginate": true,
"bAutoWidth":false,
"aoColumns": [
{"sWidth":"25%"}, {"sWidth": "70%"}, {"sWidth": "100%"}, {"sWidth": 1.10},
{"sWidth": 1.10}, {"sWidth": "100%"}, {"sWidth": 1.10}, {"sWidth": 1.10},
{"sWidth": 1.10}, {"sWidth": 1.10}, {"sWidth": 1.10}, {"sWidth": 1.10},
{"sWidth": "100%"}, {"sWidth": 1.10},
]
});
});
}
Can you link to the page please.
Allan
I am sorry that I can't link to the page yet. It is a intranet that I am learning. I thought I should use 14 times of "sWidth" for 14 columns. I was trying everything to see which would work. I tried single "sWidth": "aoColumns": [{"sWidth":1.10},], error message of "0x800a138f - JavaScript runtime error: Unable to get property 'fnSetData' of undefined or null reference" popped up. I can't send screen shut to you either.
Anyway, I can get "paging" and "sort" working. No alternate row color, no row strips, there are multiple lines of text for some column headers and cells, even I add ""white-spance": nowrap" to and in both "demo_table.css" and "demo_table_jui.css" files under "Content\css".
Thanks again for your help.
Hugh
Update: I was able to make the row with single line of text by define the table in cshtml:
Still no alternate row color and no row strip.
I also tried to add style by add two lines in table function:
$("td").addClass("single-line");
$("th").addClass("single-line");
and define a single class in css file:
.single-line { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
This approach did not work and no error. I tried both Chrome and IE. I use IE1, is it a problem?
Thanks.
Hugh
Everything work now. It was my careless mistake. the path was wrong.
Thanks again and have a good weekend!
Hugh
Allan