Question

使用服务器端进程我创建了我的表，我正在加载像bellow

这样的元素中的一些数据

我想要更多类

元素的内容，我尝试使用ready，load但是当我发出警报时我得到了不确定，所以请有人帮助我

我的整个代码在这里

    <div  class="container margin_120" id="form1">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-xs-12">
                <div id="tools">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <h4 class="inner margin_5_tb"><i class=""></i>View Counts of Students Needing Financial Assistance<button type="button" id="button1" style="border:none;background-Color:#EAECEE; float: right;font-size:12px" ><u>Hide</u></button></h4>
                        </div>              
                    </div>
                </div><!--/tools -->
                <div class="form-group" id="countTableDes">
                    <table class="table table-bordered" id="loan_data">
                        <thead>
                            <tr>
                                <th>Student Name</th>
                                <th>Student Photo</th>
                                <th>some data</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="<?php echo base_url(); ?>assets/js/jquery-1.11.2.min.js"></script>  
    $(document).ready(function(){

        var dataTable = $('#loan_data').DataTable({  
            "processing":true,  
            "serverSide":true,
            "autoWidth": false,
            "order":[],  
            "ajax":{  
                   url:'<?php echo site_url("home/getLoans"); ?>',
                   type:"POST"  
            },  

            "columns":[
                {   'data' : 'stu_firstName' },
                {   'data' : 'id',
                    'render':function(id,data,row){
                            if(row.stu_passportPhoto && row.stu_passportPhoto!=null){
                            return '<p class="more"><b>About me</b> <br/>'+row.stu_aboutStudent+'</p>';
                                }
                    }
                },
                {
                    'data' : 'stu_somedata'
                },
            ]       
        });
 //Here I want to get each more class content.
        $(document).find(".more").each(function(){
            var content = $(this).text();
            alert(content); 
        });
    });
    </script>

Answer 1

作为班级的元素＆＃34;更多＆＃34;由DataTable动态创建，您必须等到表或至少完全绘制该行。为此，您必须挂钩DataTables提供的一个可用回调： https://datatables.net/reference/option/

哪一个完全取决于您的需求，大概drawCallback应该适合您的情况，或者您也可以分别对每行使用createdRow。

这是文档中的示例代码段，适用于说明您的情况：

$('#loan_data').dataTable( {
    // rest of your options goes here...
    "drawCallback": function( settings ) {
        // you'll want to select only inside your table,
        // not the whole document, for performance reasons:
        $('#loan_data').find(".more").each(function(){
            var content = $(this).text();
            alert(content); 
        });
    }
} );

Answer 2

问题可能是数据表的呈现方式以及如何执行column：render，

最糟糕的情况是使用mutator或事件监听器

，例如Arrive.js

这是链接，

https://github.com/uzairfarooq/arrive/blob/master/src/arrive.js

它会侦听新创建的元素，你可以在其函数中运行一些东西，

做这样的事，

$(document).arrive(".more", function() {
    // 'this' refers to the newly created element
    var content = $(this).text();
    alert(content);  /* do something */
});

使用jquery获取动态创建的元素的内容

2 个答案: