Data Table basic configuration and style

Data Table basic configuration and style

midlandmidland Posts: 15Questions: 2Answers: 0
edited February 2014 in DataTables 1.9
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
}

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    The new documentation might be a good starting point if you are new with DataTables: http://next.datatables.net/manual/index .

    > 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
  • midlandmidland Posts: 15Questions: 2Answers: 0
    Hi Allen,

    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
  • midlandmidland Posts: 15Questions: 2Answers: 0
    Hi Allen,

    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},
    ]
    });
    });

    }
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    I don't quite understand the use of multiple `100%` widths, and 1.10 (which is 1.1px). DataTables will try to "correct" the widths to fit into a single 100%, but I've no idea what will happen in this case!

    Can you link to the page please.

    Allan
  • midlandmidland Posts: 15Questions: 2Answers: 0
    Hi Allen,

    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
  • midlandmidland Posts: 15Questions: 2Answers: 0
    Hi Allen,

    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
  • midlandmidland Posts: 15Questions: 2Answers: 0
    sorry, should be IE11.
  • midlandmidland Posts: 15Questions: 2Answers: 0
    Hi Allen,

    Everything work now. It was my careless mistake. the path was wrong.

    Thanks again and have a good weekend!

    Hugh
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Excellent to hear :-)

    Allan
This discussion has been closed.