jquery使用DataTable弹窗、分页

HTML

<div class="myClass">
	<div class="myClass">
		<label>名称</label>
		<div>
<input class="myClass" id="Name"  type="text"
	 readonly="readonly" placeholder="选择环节名称" onclick="mytest()">
							</div>
						</div>
					</div>
				</div>


<script type="text/ng-template" id="test.html">
		<div class="modal-header">
			<button type="button" class="close" onclick="cancel()" >
                <span>&times;</span>
        </button>
			<h4 class="modal-title">请选择名称信息</h4>
		</div>
		<button type="button" class="btn t" id="selectAll"  style="width:80px;margin-right:10px">全选</button>
		<button type="button" class="btn" id="unselectAll"  style="width:80px;margin-right:10px">反选</button>
		<div class="modal>
			<table id="NameTable"
				   class="table"
				   cellspacing="0" width="100%"  >
			</table>
		</div>
<div class="footer">
	<div class="footer">
		<button type="button" class="btn" onclick="cancel()">关闭</button>
		<button id="backfill" type="button" class="btn" onclick="ok()">提交</button>
	</div>
</div>

	</script>

JS

//Angular
let filterController = ['$scope', '$Modal',','Uri',
    function ($scope,  $interval, $Modal,Uri) {

        $scope.NameSearch = function (size) {
            var getInstance = $Modal.open({
                templateUrl: 'test.html',
                controller: 'test',//随意
                size: size,
                resolve: {
                    onus: function () {
                        return $scope.onus;
                    }
                }
            });
            var NameTable = "";
                getInstance.rendered.then(function (result) {
                    NameTable = $('#NameTable').DataTable({
                    "paging": true,
                    "ordering": true,
                    "info":  true,
                    "scrollY": 310,
                    "scrollX": true,
                    "ajax": Uri.appUri("你的URL"),
                    "columns": [
                        {data: "Name",
                            render: function (data, type, row, meta) {
                                return type === 'display' && data.length > 0 ? '<input type="checkbox" name="checkbox" class="Name" ' +
                                    'style="margin-right: 20px;font-size: 16px;" ' +
                                    'id="Name'+data.length+'" value="'+data+'" /><span>'+data+'</span>':data;
                            }, title: '名称'}
                    ],
                    select : {
                        style : 'multi',
                        selector : 'td:first-child'
                    },
                    language: {
                        sProcessing: "处理中...",
                        lengthMenu: "每页 _MENU_ 条记录",
                        zeroRecords: "没有找到记录",
                        info: "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。",
                        infoEmpty: "无记录",
                        infoFiltered: "",
                        sSearch: "搜索",
                        select: {
                            rows: {
                                _: '%d 行被选中',
                                0: '',
                                // 1: 'Just one row selected'
                            }
                        },
                        
                        oPaginate: {
                            sFirst: "首页",
                            sPrevious: "上页",
                            sNext: "下页",
                            sLast: "末页",
                            sJump: "跳转"
                        }
                        
                    },
                });
                $('#NameTable tbody').on('click', 'tr', function () {
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                    } else {
                        NameTable.$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                    }
                });

                $('#selectAll').click(function() {
                    $("input[name='checkbox']").attr("checked","true");
                    $("input[name='checkbox']").prop("checked",true);
                });

                $('#unselectAll').click(function() {
                    $("input[name='checkbox']").attr("checked","false");
                    $("input[name='checkbox']").prop("checked",false);
                });

                $('#backfill').click(function(e) {//点击提交按钮回填数据到input
                    var arr = new Array();
                    $('#NameTable').find(":checkbox:checked").each(function(i){
                        if ($("input[name='checkbox']").is(":checked") == true){
                            arr[i] = $(this).val();
                        }
                    });
                    var taskNamesCheck = arr.join(",");
                    $scope.Name = "";
                    taskNamesCheck = taskNamesCheck.replace(/\s*/g,"");
                    $scope.Name = taskNamesCheck;
                });

            }, function (reason) {
            });
            getInstance.result.then(function (result) {
            }, function (reason) {
            });
        }
		}
		]