0.前言

实习的时候，按功能模块分工作量，Java开发招进去，结果前后端一把撸；
讲真没想到自己最近花了很多时间在写js；
既然做了就好好记录一下最近的小问题
讲真觉得js有点像后端开发，如果api用的好，很多代码比Java便捷；

1.通过js动态填充DataFrame中的table

业务：批量选择datatable中的数据，以bootbox.dialog弹框的方式加载进去；

问题：弹框中的form是以js嵌套html的方式，但是里面包括对table的动态增加，涉及遍历，html中不知如何遍历，不知如何动态增加。

解决：js小白的粗暴解决方式：在form中调用方法，在方法中嵌入js的for循环；

var form = '<form id="update_bucket" method="post" class="form-horizontal" xmlns="http://www.w3.org/1999/html">' +
		'<label class="control-title">Title</label>' +
		'<div id="div_hubble_alarm" class="margin-top-0 margin-bottom-0 clearfix">'+
		'<table id="testyww" class="table table-striped table-advance">'+
		'<tr><thead>'+
		'<th>VIP</th>'+ '<th>Port</th></thead></tr>' +
		'<tbody>' +fillBatchHubbleDataTable(selObjs)+
		'</tbody>'+
		'</table>'+
		'</div>'+
		'</div>'+
		'</form>';
		
//调用方法，根据length动态增加；
function fillBatchHubbleDataTable(selObjs) {
	for (var i=0;i<selObjs.vipPortIds.length;i++) {
		var line = "<tr>" +
			"<td>"+selObjs.vips[i]+"</td>" +
			"<td>"+selObjs.vipPorts[i]+"</td>" +
			"</tr>"+line;
	}
	return line;
}

2.ajax请求url更换

业务：一开始表格中显示本用户下的所有表单，如果是管理员，则显示全部表单，在同一个DataTable上显示。

问题：好吧对ajax不熟，对datatable的刷新，reload都不熟，不知道怎么用；

解决：看了DataTable的官方文档，www.datatables.club/reference/a… 发现很简单，直接对ajax中的url修改即可；

function initBucketListTable() {
    bucketTable = $("#bucketListTable").DataTable({
        "processing": true,
        "serverSide": false,
        "filter": true,
        "autoWidth": false,
        "iDisplayLength": 10,
        "aaSorting": [[1, "asc"], [0, "asc"]],
        "aLengthMenu": [[10, 50, 100, 500, -1], [10, 50, 100, 500, "全部"]],
        "ajax": {
            "url": "/p/qcs/bucket/getBucketList",
            "type": "POST",
            "dataType": "json",
            "data": function () {
            },
        },
    });
}

//触发对ajax中url的修改函数
function allBucket() {
    bucketTable.ajax.url("/p/qcs/bucket/getAdminBucketList").load();
}

3.总结

多看api，很多逻辑不知道怎么实现，主要是属性不熟吧。

js Datatables几个使用总结

0.前言

1.通过js动态填充DataFrame中的table

2.ajax请求url更换

3.总结