jquery - 显示两个搜索框和分页数据的数据表-6ren

jquery - 显示两个搜索框和分页数据的数据表

转载作者：行者123 更新时间：2023-12-03 22:52:36

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

duplicate datatable controls

更新

这是整个页面:

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

最佳答案

我有一些helpful input来自艾伦的数据表。具体来说:

$('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.

关于jquery - 显示两个搜索框和分页数据的数据表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13984698/

文章推荐： kendo-ui - 从 Kendo 网格数据填充 Kendo Treeview

文章推荐： JQuery:如何从 href 中提取 anchor

文章推荐： kendo-ui - Kendo Treeview ，节点折叠但不再展开

文章推荐： jquery - Fancybox iframe 动态调整大小

javascript - 在 Angular 数据表 rowCallback 函数上返回 Angular 数据表
我有一个带有嵌套数据的 angular 数据表，我正在尝试在行点击函数上创建另一个数据表。父数据表的 rowCallBack 函数。这是我的外部数据表 html；这是我生成数据表的方
数据表:在过滤器字符串中包含空格
我有一个字母数字列，其中包含诸如“1、2、2”之类的字符串。当我在搜索中输入“1, 2, 2”时，它似乎返回带有“1,”和“2,”的所有单元格。我该怎么做才能使搜索仅返回“1、2、2”？使用数据
数据表:如何使用附加参数重新加载服务器端数据
我有一个获取其数据服务器端的表，使用自定义服务器端初始化参数，这些参数因生成的报告而异。表格生成后，用户可以打开一个弹出窗口，他们可以在其中添加多个附加过滤器以进行搜索。我需要能够使用与原始表相同的初
数据表 + 隐藏所有列按钮
在 datatables我希望能够隐藏所有列，但似乎无法正确使用语法。这来自下面的代码和上面的链接，创建了一个显示所有列的按钮。有没有办法写这个以便我可以隐藏所有列？ {
数据表:根据值更改单元格颜色
我正在使用 DataTable 创建一个交互式表。我有 9 列，其中 5 列是值。我想根据它们的具体情况更改每个单元格的背景颜色。我已经开始尝试首先更改整行颜色，因为这似乎是一项更容易的任务。但是我
数据表 - 水平滚动时列标题不会移动
我有一个简单的例子来说明我的问题。我正在使用数据表 1.9。当数据表位于另一个 html 表内时，水平滚动时列标题不会移动。当它不在 html 表中时它工作正常。我的示例实际上取自他们的水平滚动示例，
数据表 - 使用嵌套独立表向下钻取行
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
数据表 + 如何将服务器端处理代码与文件导出代码结合起来
这是添加按钮以将数据导出到 csv、pdf、excel 的数据表示例...... fiddle here https://datatables.net/extensions/buttons/examp
angularjs - 数据表 - 更改按钮样式
是否有任何方法可以更改 angularjs 数据表中的按钮样式(colvis、copy、print、excel)。 vm.dtOptions = DTOptionsBuilder.newOptions
R 数据表 - 加入但过滤更新
我试图弄清楚如何加入 2 个数据表并更新第一个但应用了过滤器。 DT DT2 b c 1: 1 10 2: 2 10 3: 3 10 4: 4 10 5: 5 10 6: 6 10 7: 7 10
r - 数据表 - 从另一列按名称选择列的值
我有一个数据表，其中包含许多包含值的列。我还有另一列，它定义了我需要选择哪些列的值。我很难找到一种方法来做到这一点。这是一个简单的例子。 > d d value.1 value.2 name
r - 数据表 - 在几列上应用相同的函数来创建新的数据表列
我正在使用 data.table 包。我有一个数据表，表示用户在网站上的操作。假设每个用户都可以访问一个网站，并对其执行多项操作。我的原始数据表是 Action (每一行都是一个 Action )，我
r - 数据表。快速计算每列内更改次数的方法
我想知道每个变量在每个组中变化了多少次，然后将结果添加到所有组中。我是这样找到的: mi[,lapply(.SD, function(x) sum(x != shift(x), na.rm=T)
button - 数据表 - 添加按钮到页眉或页脚
有人可以向我解释一下如何向页眉或页脚添加按钮吗？Datatables 的开发者 Alan 说你必须离开网络服务器才能使用 Table Tools 来使用按钮。但我在独立计算机上离线运行 Datatab
R 数据表 - 使用当前行之前的所有行计算每一行
我希望按 id 和按顺序(时间)计算不同的东西。例如，与: dt = data.table( id=c(1,1,1,2,2,2,3,3,3), hour=c(1,5,5,6,7,8,23,23,23
jquery - 数据表:没有分页按钮
我正在尝试在 JIRA 小工具中使用数据表，但在我的表准备就绪后，没有可用的分页按钮。我有一个表，我正在以最简单的方式使用数据表:$("#mytableid").dataTable(); 浏览页面元素
jquery - 将输入值保存在子行中 - 数据表
我有 responsive 表单中的数据表。数据表生成 child rows在小型设备上。在这一行中，我有一些输入控件。这会导致两个问题。第一个问题:**隐藏子行中的值不会进入表单数据。** 第二
JQuery 数据表 Keydown
我在使用 JQuery DataTable 捕获 keydown 事件时遇到问题。我的目标是允许用户使用箭头键导航表的行。因此，当用户按下箭头键时，我想捕获 keydown 事件并移动表的选定行(这是
jQuery 数据表，以编程方式更改显示的行数
是否有任何方法可以以编程方式更改显示的行数，而无需从下拉列表中手动选择？我已经知道如何更改默认行数。当表首次加载时，我希望它加载所有行，然后“刷新”表以可能仅显示前 10 行。但我想以编程方式刷新表
jquery - 数据表 - 回调后保留选定的页码
我有一个数据表，我应该对其进行更改，例如我想更改内容的状态，但该内容位于表的第三页。当我更改它时，数据表会自行刷新到第一页。我想做的是保留选定的页码并在刷新后回调它。这可能吗？顺便说一句，我正在使用

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 显示两个搜索框和分页数据的数据表