Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Datatables showing two search boxes and pagination data

I am trying to integrate datatables into my project. One of my tables has a button to add additional rows. I used the method shown here. After adding a row and submitting the results, I end up with double datatables controls as shown here:

duplicate datatable controls

Update

Here is the entire page:

<!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>

Why does adding rows to the table #emails result in duplicate datatable controls after a submit?

For some reason datatables is embedding a div#emails_wrapper inside of another div#emails_wrapper.

like image 277
Erik Avatar asked Dec 21 '12 05:12

Erik


1 Answers

I got some helpful input from Allan over at datatables. Specifically:

$('body').html(data);

You are rewriting the entire HTML body's tree - so when you call $('#emails').dataTable() DataTables will check to see if there is already a table on that node (note it is a node check, not an ID check), but there isn't since you've destroyed it and rewritten it. So the original HTML is still present from the old table, and DataTables adds a new table, since it is a new HTML table element.

So you need to either destroy the table before rewriting the whole tree, or preferably not rewrite the whole tree, just manipulate the bits you want updated.

like image 76
Erik Avatar answered Nov 05 '22 12:11

Erik