显示两个搜索框和分页数据的数据表答案

【问题标题】：Datatables showing two search boxes and pagination data显示两个搜索框和分页数据的数据表
【发布时间】：2012-12-21 05:23:11
【问题描述】：

我正在尝试将数据表集成到我的项目中。我的一张表有一个按钮来添加额外的行。我使用了here所示的方法。添加一行并提交结果后，我最终得到了如下所示的双数据表控件：

更新

这是整个页面：

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

            <title>Project name</title>

        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="shortcut icon" type="image/png" href="/static/images/favicon.ico" />

        <!-- For third-generation iPad with high-resolution Retina display: -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/images/apple-touch-icon-144x144-precomposed.png">
        <!-- For iPhone with high-resolution Retina display: -->
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/images/apple-touch-icon-114x114-precomposed.png">
        <!-- For first- and second-generation iPad: -->
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/images/apple-touch-icon-72x72-precomposed.png">
        <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
        <link rel="apple-touch-icon-precomposed" href="/static/images/apple-touch-icon-precomposed.png">

        <link rel="stylesheet" href="/static/css/bootstrap.min.css">

        <style>
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>
        <link rel="stylesheet" href="/static/css/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="/static/css/main.css">
        <script src="/static/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>




<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/">VBEnergyZone</a>
            <div class="nav-collapse">



<ul class="nav">

    <li><a href="/">Home</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools<b class="caret"></b></a>
        <ul class="dropdown-menu">





        </ul>
    </li>

        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="/core/customers/">Customers</a></li>
                <li><a href="/core/meters/">Meters</a></li>
                <li><a href="/core/price_requests/">Price requests</a></li>
                <li><a href="/core/suppliers/">Suppliers</a></li>
                <li><a href="/core/supplier_groups/">Supplier groups</a></li>
                <li><a href="/core/utilities/">Utilities</a></li>
            </ul>
        </li>



        <li><a href="/core/user_profiles/">User Profiles</a></li>
        <li><a href="/admin">Django Admin</a></li>

</ul>

<div class="pull-right">
    <ul class="nav">
        <li><a href="/about"><i class="icon-info-sign icon-white"></i> About</a></li>

            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-star"></i> eevenson<span class="caret"></span></a>


        <ul class="dropdown-menu">
            <li><a href="/core/user_profiles/eevenson/">Profile</a></li>
            <li><a href="/accounts/password_change/">Change password</a></li>
            <li><a href="/accounts/logout/">Log out</a></li>
        </ul>
    </ul>
</div>

            </div>
        </div>
    </div>
</div>


        <div class="container">
            <div class='messages'>

            </div>



    <h2>A Test Customer</h2>
    <h3>Customer</h3>
    <form action="" id="form" enctype="multipart/form-data" method="post">


<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='NCQ15jA7erX5dAbx20Scr3gWxgaTn3Iq' /> </div><ul class='nav nav-tabs'><li class='active'><a class='tab' href='#tab0' data-toggle='tab'>Basic information</a></li><li><a class='tab' href='#tab1' data-toggle='tab'>Meters</a></li><li><a class='tab' href='#tab2' data-toggle='tab'>Emails</a></li><li><a class='tab' href='#tab3' data-toggle='tab'>Phone numbers</a></li><li><a class='tab' href='#tab4' data-toggle='tab'>Locations</a></li><li><a class='tab' href='#tab5' data-toggle='tab'>Documents</a></li><li><a class='tab' href='#tab6' data-toggle='tab'>Managers</a></li></ul></hr><div  
    class="tab-content" ><div  
    class="tab-pane active"  id="tab0"><div  
    class="row" ><div  
    class="span4" ><div id="div_id_name" class="control-group"><label for="id_name" class="control-label requiredField">
                Name<span class="asteriskField">*</span></label><div class="controls"><input name="name" value="A Test Customer" class="span4 textinput textInput" maxlength="128" type="text" id="id_name" /> </div></div><div id="div_id_legal_name" class="control-group"><label for="id_legal_name" class="control-label ">
                Legal name
            </label><div class="controls"><input id="id_legal_name" type="text" class="span4 textinput textInput" name="legal_name" maxlength="128" /> </div></div><div id="div_id_tags" class="control-group"><label for="id_tags" class="control-label ">
                Tags
            </label><div class="controls"><input id="id_tags" type="text" class="span4 tagwidget" name="tags" /> <p id="hint_id_tags" class="help-block">A comma-separated list of tags.</p></div></div></div><div  
    class="span4" ><div id="div_id_duns_number" class="control-group"><label for="id_duns_number" class="control-label ">
                Duns number
            </label><div class="controls"><input id="id_duns_number" type="text" class="span4 textinput textInput" name="duns_number" maxlength="9" /> </div></div><div id="div_id_taxpayer_id_number" class="control-group"><label for="id_taxpayer_id_number" class="control-label ">
                Taxpayer ID number
            </label><div class="controls"><input id="id_taxpayer_id_number" type="text" class="span4 textinput textInput" name="taxpayer_id_number" maxlength="9" /> </div></div><div id="div_id_customer_type" class="control-group"><label for="id_customer_type" class="control-label ">
                Customer type
            </label><div class="controls"><select id="id_customer_type" class="span4 select" name="customer_type"><option value="" selected="selected">---------</option><option value="MUNI">Munincipality</option><option value="SCDT">School District</option><option value="UNIV">University</option></select></div></div></div><div  
    class="span4" ><div id="div_id_active" class="control-group"><div class="controls"><label for="id_active" class="checkbox "><input id="id_active" checked="checked" type="checkbox" class="span4 checkboxinput" name="active" />
                        Active












                    </label></div></div></div></div></div><div  
    class="tab-pane"  id="tab1"><div  
    class="row" ><div  
    class="span4" ><div id="div_id_meter_textarea" class="control-group"><label for="id_meter_textarea" class="control-label ">
                List of meters
            </label><div class="controls"><textarea id="id_meter_textarea" rows="10" cols="40" name="meter_textarea" class="span4 textarea"></textarea><p id="hint_id_meter_textarea" class="help-block">Enter meter ESI IDs one per line.  Meters will become owned             by customer.  New meter ESI IDs will be created as necessary.              Duplicate ESI IDs will be ignored.  Meters owned by a             different customer will change ownership.</p></div></div></div><div  
    class="span4" ><div id="div_id_utility" class="control-group"><label for="id_utility" class="control-label ">
                Utility
            </label><div class="controls"><select id="id_utility" class="span4 select" name="utility"><option value="" selected="selected">---------</option></select></div></div></div><div  
    class="span4" ></div></div><fieldset><legend>Meters</legend><input type="hidden" name="meters-TOTAL_FORMS" value="0" id="id_meters-TOTAL_FORMS" /> <input type="hidden" name="meters-INITIAL_FORMS" value="0" id="id_meters-INITIAL_FORMS" /><input type="hidden" name="meters-MAX_NUM_FORMS" id="id_meters-MAX_NUM_FORMS" /> <table id="meters" class="formsetTable"><thead><tr><th>ESI ID</th><th>Utility</th><th class="vbNoSearchSort">Delete?</th></tr></thead><tbody></tbody></table></fieldset></hr></div><div  
    class="tab-pane"  id="tab2"><div  
    class="row" ><div  
    class="span4" ></div><div  
    class="span4" ></div><div  
    class="span4" ></div></div><fieldset><legend>Emails</legend><input type="hidden" name="emails-TOTAL_FORMS" value="1" id="id_emails-TOTAL_FORMS" /> <input type="hidden" name="emails-INITIAL_FORMS" value="0" id="id_emails-INITIAL_FORMS" /><input type="hidden" name="emails-MAX_NUM_FORMS" id="id_emails-MAX_NUM_FORMS" /> <table id="emails" class="formsetTable"><thead><tr><th>Email</th><th>Email type</th><th class="vbNoSearchSort">Delete?</th></tr></thead><tbody><tr class="row1"><td><input id="id_emails-0-email" type="text" name="emails-0-email" maxlength="75" /> </td><td><input id="id_emails-0-email_type" type="text" name="emails-0-email_type" maxlength="128" /> </td><td><input type="hidden" name="emails-0-id" id="id_emails-0-id" /> <input type="checkbox" name="emails-0-DELETE" id="id_emails-0-DELETE" /></td></tr></tbody><tfoot><tr style="display:none;" class="template"><td><input id="id_emails-NUM-email" type="text" name="emails-NUM-email" maxlength="75" /> </td><td><input id="id_emails-NUM-email_type" type="text" name="emails-NUM-email_type" maxlength="128" /> </td><td><input type="hidden" name="emails-NUM-id" id="id_emails-NUM-id" /> <input type="checkbox" name="emails-NUM-DELETE" id="id_emails-NUM-DELETE" /></td></tr></tfoot></table></fieldset></hr><input class='addEmail btn btn-primary' name="addRow" value="Add row" /> </div><div  
    class="tab-pane"  id="tab3"><div  
    class="row" ><div  
    class="span4" ></div><div  
    class="span4" ></div><div  
    class="span4" ></div></div></div><div  
    class="tab-pane"  id="tab4"><div  
    class="row" ><div  
    class="span4" ></div><div  
    class="span4" ></div><div  
    class="span4" ></div></div></div><div  
    class="tab-pane"  id="tab5"><div  
    class="row" ><div  
    class="span4" ></div><div  
    class="span4" ></div><div  
    class="span4" ></div></div></div><div  
    class="tab-pane"  id="tab6"><div  
    class="row" ><div  
    class="span4" ></div><div  
    class="span4" ></div><div  
    class="span4" ></div></div></div></div>

        <div class="btn-toolbar">
            <input class='btn btn-primary' type="submit" name="submit" value="Submit changes" />
            <a href="/core/customers/" class="btn btn-primary">Cancel</a>
        </div>
    </form>



                <hr/>

        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="/static/js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
        <script src="/static/js/vendor/bootstrap.min.js"></script>
        <script src="/static/js/main.js"></script>


    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

    <script>    

    /* Create an array with the values of all the input boxes in a column */
    $.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn )
    {
        var aData = [];
        $( 'td:eq('+iColumn+') input:last', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
            aData.push( this.value );
        } );
        return aData;
    }

    /* Create an array with the values of all the select options in a column */
    $.fn.dataTableExt.afnSortData['dom-select'] = function  ( oSettings, iColumn )
    {
        var aData = [];
        $( 'td:eq('+iColumn+') select:last', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
            aData.push( $(this).val() );
        } );
        return aData;
    }

    /* Create an array with the values of all the checkboxes in a column */
    $.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
    {
        var aData = [];
        $( 'td:eq('+iColumn+') input:last', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
            aData.push( this.checked==true ? "1" : "0" );
        } );
        return aData;
    }

        $(document).ready(function() {
            $('#meters').dataTable(
                {
                    "aoColumns": [
                        null,
                        null,
                        { "sSortDataType": "dom-checkbox" },
                    ],
                    "aoColumnDefs": [
                        { 
                            "aTargets":     ["vbNoSearchSort"],
                            "bSearchable":  false,
                            "bSortable":    false
                        }
                    ],
                    "bProcessing"   :true,
                    "bStateSave"    :true,
                    "sPaginationType": "full_numbers"
                }
            );

            $('#emails').dataTable(
                {
                    "aoColumns": [
                        { "sSortDataType": "dom-text" },
                        { "sSortDataType": "dom-text" },
                        { "sSortDataType": "dom-checkbox" },
                    ],
                    "aoColumnDefs": [
                        { 
                            "aTargets":     ["vbNoSearchSort"],
                            "bSearchable":  false,
                            "bSortable":    false
                        }
                    ],
                    "bProcessing"   :true,
                    "bStateSave"    :true,
                    "sPaginationType": "full_numbers"
                }
            );

        } );
    </script>

    <script>
    var emailsTable;
    var metersTable;

    $(document).ready(function() {
        $('#form').submit( function() {
            var sData = 
                emailsTable.$('input')
                .add(metersTable.$('input'))
                .add('input')
                .add('textarea')
                .add('select')
                .serialize();
            $.post('', sData, function(data){$('body').html(data); });
            // $.post('', sData, function(data){
            //  var messages = $('.messages', data);
            //  $('.messages').replaceWith(messages);
            // });
            return false;
        } );

        emailsTable = $('#emails').dataTable();
        metersTable = $('#meters').dataTable();
    } );

    $('.addEmail').click(function(){
        var type = 'emails'
        var total = $('#' + type).dataTable().fnSettings().fnRecordsTotal();
        var tableId = $('#'+ type).attr('id');
        var template = new Array();

        $('#'+tableId+' tfoot tr.template td')
        .clone()
        .each(function(){
            $(this).html($(this).html().replace(/NUM/g,total));
        })
        .each(function(){
            template.push($(this).html());
        });

        $('#'+tableId).dataTable().fnAddData(template);
        total++;
        $('#id_' + type + '-TOTAL_FORMS').val(total);

    });
    </script>


    </body>
</html>

为什么向表中添加行#emails 会导致提交后重复的数据表控件？

由于某种原因，数据表将 div#emails_wrapper 嵌入到另一个 div#emails_wrapper 中。

【问题讨论】：

你能把你得到的标记粘贴到发生这种情况的地方吗？
是的——我更新了这个问题。谢谢。
你的问题不在于行吗？问题出在控件上。我的意思是show entries 下拉列表和搜索框对吗？
对 - 有两个。
虽然有很多代码要挖掘，但如果你能生成一个最小的测试用例，你肯定会得到更好的帮助。

标签： jquery datatables

【解决方案1】：

我在数据表上从艾伦那里得到了一些helpful input。具体来说：

$('body').html(数据);

您正在重写整个 HTML 正文的树 - 所以当您调用 $('#emails').dataTable() DataTables 会检查是否有该节点上已经有一个表（注意它是一个节点检查，而不是一个 ID 检查），但是自从您将其销毁并重写后就没有了。所以旧表中仍然存在原始 HTML，并且 DataTables 添加一个新表格，因为它是一个新的 HTML 表格元素。

所以你需要在重写整个表之前销毁表树，或者最好不要重写整个树，只需操作您想要更新的位。

【讨论】：