JQuery Datatables行高 [英] JQuery Datatables row height

问题描述

我有一个页面，人们可以输入名字，电话，电子邮件和种族点击添加，并在数据表中添加一个条目。问题是点击添加表后显示如下：

如何调整每一行的高度，使其正常显示。这是我的html代码：

 < div id =table> 
< form id =add_nrowtitle =Add> 
< br /> 
< label for =name>名字< / label>< input type =textname =fnameid =fnameclass =required =0/> ; 
< br /> 
< label for =name> Last Name< / label>< input type =textname =lnameid =lname =1/> 
< br /> 
< label for =name> Phone< / label>< input type =textname =phoneid =phone =3/> 
< br /> 
< label for =name> Email< / label>< input type =textname =emailid =email =4/> 
< br /> 
< label for =name>种族< / label>< input type =textname =ethnicityid =ethnicity =5/> 
< br /> 
< input type =buttonvalue =Addid =addbtn/>< br />< br /> 
< / form> 
 
< table id =reg_moreborder =1> 
< thead> 
< tr> 
< th>名字< / th> 
< th>姓氏< / th> 
< th> Phone< / th> 
< th>电子邮件< / th> 
< th>种族< / th> 
< / tr> 
< / thead> 
< / table> 
< / div> 
  

这是我的jquery代码

  $（＃addbtn）。点击（addrow）; 
 $（'＃reg_more'）。dataTable（{
bLengthChange：false，
bInfo：false，
bPaginate：false，
 bStateSave：true，
rowHeight：'auto'，
bFilter：true，
bSort：false，
bAutoWidth：false 
 }）; 
 
 
函数addrow（）{
 $（'＃reg_more'）。dataTable（）。fnAddData（[
 $（'＃fname'）。val ）
 $（'＃lname'）。val（），
 $（'＃phone'）。val（），
 $（'＃email' 
 $（'＃ethnicity'）。val（）]）; 
} 
  

我有两个问题：

1. 如何正确调整高度，以便用户查看数据？


2. 如果输入20个人的信息，该怎么做我拿所有的数据，所以我可以把它输入一个mysql数据库？

解决方案

可以在这个小提琴中看到你的代码是正确的，应该按预期工作。

无论如何设置行高，只需使用css

  tr {height：50px} 
  

我认为没有必要更复杂。 / p>

关于如何将数据插入数据库的问题，在 google 。

I have a page where people can enter in first/last name, phone, email, and ethnicity click add and it adds an entry into the datatables. The problem is after clicking add the table shows up like this:

How do I adjust the height of each row so that it shows up properly. This is my html code for the table:

<div id="table">
    <form id="add_nrow" title="Add">
        <br/>
        <label for="name">First Name</label><input type="text" name="fname" id="fname" class="required" rel="0" />
        <br />
        <label for="name">Last Name</label><input type="text" name="lname" id="lname" rel="1" />
        <br />
        <label for="name">Phone</label><input type="text" name="phone" id="phone" rel="3" />
        <br />
        <label for="name">Email</label><input type="text" name="email" id="email" rel="4" />
        <br />
        <label for="name">Ethnicity</label><input type="text" name="ethnicity" id="ethnicity" rel="5" />
        <br />   
        <input type="button" value="Add" id="addbtn" /><br/><br/>  
    </form>

    <table id="reg_more" border="1">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Ethnicity</th>
            </tr>
        </thead>
    </table>
</div>

Here is my jquery code

$("#addbtn").click(addrow);
$('#reg_more').dataTable({
                "bLengthChange": false,
                "bInfo": false,
                "bPaginate": false,
                "bStateSave": true,
                "rowHeight": 'auto',
                "bFilter": true,
                "bSort": false,
                "bAutoWidth": false
            });


function addrow() {
    $('#reg_more').dataTable().fnAddData( [
        $('#fname').val(),
        $('#lname').val(),
        $('#phone').val(),
        $('#email').val(),
        $('#ethnicity').val()] );
    }

I have two questions really:

1. How do I adjust the height properly so the user can see the data?
2. If the enter in the information of 20 people, how do I take all that data so I can enter it into a mysql database?

解决方案

As you can see in this fiddle your code is correct and should work as expected.

In any case to set a row height, simply use css

 tr { height: 50px } 

i think there is no need for it to be more complex.

Regarding the question on how to insert the data into a db, there are tons of examples on google.

这篇关于JQuery Datatables行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！