datatables 增、删、查、改

最新推荐文章于 2021-08-31 10:28:36 发布

转载最新推荐文章于 2021-08-31 10:28:36 发布 · 741 阅读

DataTables 专栏收录该内容

13 篇文章

订阅专栏

博客介绍了DataTable的相关操作。包括其定义，新增操作可参考特定网址，修改操作有对应参考链接，还提及了删除、查询操作，查询包含自定义查询框和自定义查询js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提: datatable 定义

var table = $('#example').DataTable({
    "ajax": "donor/book_donation_data.php",
    responsive: true,
    //data: data,
    columns: [{
        data: 'id'
    },
    {
        data: 'donor'
    },
    {
        data: 'book_name'
    },
    {
        data: 'author'
    },
    {
        data: 'publishing_time'
    },
    {
        data: 'price'
    },
    {
        data: 'donor_duplicate'
    },
    {
        data: 'holdings'
    },
    {
        data: 'call_number'
    },
    {
        data: 'donation_time'
    }

    ],

    "fnPreDrawCallback": function(oSettings) {
        $('.dataTables_filter input').attr({
            'name': 'search',
            'placeholder': '搜索站内新闻公告'
        }); //提示
    },

        language: {        "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {            "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"        
        },
                "oAria": {            "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"        
        }    
    }
});

新增 : 参考 http://www.datatables.club/example/api/add_row.html

table.row.add( [
	data.mydata[0].d1,
	data.mydata[0].d2,
	data.mydata[0].d3,
	data.mydata[0].d4,
	data.mydata[0].d5,
	data.mydata[0].d6,
	data.mydata[0].d7,
	data.mydata[0].d8,
	data.mydata[0].d9
] ).draw();

修改参考: https://datatables.net/reference/api/row().data()

var data_list = data.mydata[0];
var d = table.row('.selected').data();

d.id = data_list.id;
d.donor = data_list.donor;
d.book_name = data_list.book_name;
d.author = data_list.author;
d.publishing_time = data_list.publishing_time;
d.price = data_list.price;
d.donor_duplicate = data_list.donor_duplicate;
d.holdings = data_list.holdings;
d.call_number = data_list.call_number;
d.donation_time = data_list.donation_time;

table.rows('.selected').invalidate();

table.rows('.selected').data(d).draw();

删除

table.rows('.selected').remove().draw();

查询

1.自定义查询框

div class="am-u-sm-12 am-u-md-4">
	                        <div class="am-input-group">
	                            <input id="donor_search_input" type="text" class="am-form-field">
	                            <span class="am-input-group-btn">
	                            <button id="donor_search_btn" class="am-btn am-btn-default" type="button">搜索</button>
	                          </span>
	                        </div>
	                    </div>

2. 自定义查询 js

$('#donor_search_input').on('keyup', function () {
			                table.search(this.value).draw();
			            });
			
			 $('#donor_search_btn').on('onclick', function () {
			                table.search(this.value).draw();
			            });