jquery下使用 datatables 獲取後臺 nodejs 數據

顯示 html 端 添加 table 的代碼

  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">



			<table id="table_id_example" class="table table-bordered table-striped">
				<thead>
					<tr>
						<th style="width: 40px">編號</th>
						<th>用戶名</th>
						<th>電話</th>
						<th style="width: 150px">操作</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>

...
...
...

<!-- jQuery 2.2.3 -->
<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>

<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- page script -->
<script>
  $(function () {
	$('#table_id_example').DataTable( {
		"processing": true,		//開啓加載等待提示，提示信息是下面language中的sProcessing配置
        "serverSide": true,		//打開服務器模式
        "searching": false, 	//是否開啓搜索功能
        "ordering": false,		//是否排序
		"ajax": {
			"url": "/users/queryall",
			"type": "post",
			"data": function(d){	//d包含了DataTables發送到服務器的參數，這裏還可以根據自己的業務添加參數
                //可以自定義一些業務參數
                //d.xxx = "xxx";
			}
		},
		"columns": [
            { "data": 'id' },
            { "data": 'username' },
			{ "data": 'tel' },
			{ "data": null },
        ],
		
		"columnDefs" : [ {
				// 定義操作列,######以下是重點########
				"targets" : -1,//操作按鈕目標列
				"data" : null,
				"render" : function(data, type,row) {
				var id = '"' + row.id + '"';
				var html = "<a href='javascript:void(0);'  class='delete btn btn-default btn-xs'  ><i class='fa fa-times'></i> 查看</a>"
				html += "<a href='javascript:void(0);' class='up btn btn-default btn-xs'><i class='fa fa-arrow-up'></i> 編輯</a>"
				html += "<a href='javascript:void(0);'   onclick='deleteThisRowPapser("+ id + ")'  class='down btn btn-default btn-xs'><i class='fa fa-arrow-down'></i> 刪除</a>"
				return html;
			}
		}],		
		// 國際化
		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": ": 以降序排列此列"
			}
		}
    });
});
</script>

其中 

        "ajax": {
            "url": "/users/queryall",
            "type": "post",
            "data": function(d){    //d包含了DataTables發送到服務器的參數，這裏還可以根據自己的業務添加參數
                //可以自定義一些業務參數
                //d.xxx = "xxx";
            }
        },

定義了往後臺拿數據的地址

再來一段 nodejs 代碼,將讀取數據的信息 json 返回,數據要放到 data: 裏面 這個是 必須的   draw 要和輸入的 draw 一樣

router.route("/queryall").post(function(req,res,next){    // 到達此路徑則渲染login文件，並傳出title值供 login.html使用
  if(req.session.userid==null)
  {
    res.render("login",{title:'eGAME'});
    return;
  } 
  userDao.queryall(req,res,(err,rows)=>{
    var ret;
    if(err==undefined)
    {
      ret = {
          code: 200,
          msg:'success',
          draw:req.draw,
          data:rows
      };
      jsonWrite(res,ret);
    }
    else
    {
      jsonWrite(res,undefined);
    }
  });
});