無聊做一個，但是還是留下一些疑惑:
- 在控件中加入例如編輯，刪除之類的按鈕，而不是以行內元素呈現。
- 真實分頁的實現方法。
要是有知道的朋友，希望指點一二。
下面只實現的功能：
- 隱藏列
- 凍結列
- 分頁
- 列排序
前提附件準備：js+css
前臺：
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="../../Style/Bootstrap/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet" type="text/css" /> <link href="../../Style/Bootstrap/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet" type="text/css" /> <link href="../../Style/Bootstrap/css/animate.min.css" rel="stylesheet" type="text/css" /> <link href="../../Style/Bootstrap/css/style.min862f.css?v=4.1.0" rel="stylesheet" type="text/css" /> <link href="dataTables.bootstrap.min.css" rel="stylesheet" /> <link href="fixedColumns.bootstrap.min.css" rel="stylesheet" /> <link href="select.dataTables.min.css" rel="stylesheet" /> <script src="jquery-1.12.4.js"></script> <script src="jquery.dataTables.min.js"></script> <script src="dataTables.bootstrap.min.js"></script> <script src="dataTables.select.min.js"></script> <script src="dataTables.fixedColumns.min.js"></script> <script> $(document).ready(function () { jiazai(); }); function jiazai() { $.ajax({ url: "DataTables_Test.aspx/GetData", type: "POST", contentType: "application/json; charset=utf-8", datatype: "json", success: function (data) { var str = data.d; var arr = str.split('&'); var field = arr[0]; var data1 = arr[1]; Getdata(eval(data1), eval(field)); var str_option = ""; var aa = eval(field) for (var i = 0; i < aa.length; i++) { //if (i == 0) { // str_option += "<option value = '" + i + "'>複選框</option>"; //} //else { str_option += "<option value= '" + i + "'>" + aa[i].title + "</option>";//data-column //} } $("#selects").append(str_option); } }); } function Getdata(data1, field) { var dong = $("#tb_dong").val(); var table = $('#table_local').DataTable({ data: data1, columns: field, //lengthMenu: [5, 10, 20, 30],//這裏也可以設置分頁，但是不能設置具體內容，只能是一維或二維數組的方式，所以推薦下面language裏面的寫法。 scrollY: "300px", scrollX: true, scrollCollapse: true, paging: true,//分頁 iDisplayLength: 20,// 每頁顯示行數 ordering: true,//是否啓用排序 searching: true,//搜索 bDeferRender: true, responsive: true, destroy: true,//銷燬，爲了改變凍結列 fixedColumns: { leftColumns: dong, rightColumns: 2 }, select: true, language: { lengthMenu: '<div class="input-group"><select class="form-control input-sm">' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select><span class="input-group-addon">條記錄</span></div>',//左上角的分頁大小顯示。 search: '',//右上角的搜索文本，可以寫html標籤 searchPlaceholder: "搜吧", paginate: {//分頁的樣式內容。 previous: "上一頁", next: "下一頁", first: "第一頁", last: "最後" }, zeroRecords: "沒有內容",//table tbody內容爲空時，tbody的內容。 //下面三者構成了總體的左下角的內容。 info: "<span class='label'>總共_PAGES_ 頁，顯示第_START_ 到第 _END_ ，篩選之後得到 _TOTAL_ 條，初始_MAX_ 條 </span>",//左下角的信息顯示，大寫的詞爲關鍵字。 infoEmpty: "0條記錄",//篩選爲空時左下角的顯示。 infoFiltered: ""//篩選之後的左下角篩選提示， }, pagingType: "full_numbers",//分頁樣式的類型 aoColumnDefs: [//設置列的屬性，此處設置第一列不排序 { bSortable: false, aTargets: [-1, -2] } ], }); //$("#table_local_filter input[type=search]").css({ width: "auto" });//右上角的默認搜索文本框，不寫這個就超出去了。 $('#selects').on('click', function (e) { var selectText = $("#selects").find("option:selected").val(); e.preventDefault(); // Get the column API object //var column = table.column($(this).attr('data-column')); var column = table.column(selectText); // Toggle the visibility column.visible(!column.visible()); }); $(":button").on("click", function (e) { var arr = e.target.id.split('_'); switch (arr[1]) { case "edit": alert("edit" + arr[2]); break; case "del": alert("del" + arr[2]); break; } }); //$("#btn_edit").click(function () { // var rows = table.rows('.selected').indexes(); // var data = table.rows(rows).data(); // for (var i = 0; i < data.length; i++) { // alert(data[i][1] + "," + data[i][2]); // } //}); //$("#btn_del").click(function () { // var rows = table.rows('.selected').indexes(); // var data = table.rows(rows).data(); // for (var i = 0; i < data.length; i++) { // alert(data[i][1] + "," + data[i][2]); // } //}); ////全選 //$('#checkbox_id_all').click(function () { // $(":checkbox:not(#checkbox_id_all)").attr("checked", this.checked); //}); } function chang() { jiazai(); } </script> </head> <body> <form id="form1" runat="server"> <div class="row m-t-sm"> <div class="col-sm-12"> <div class="col-sm-2"> <select id="selects" multiple="multiple" class="form-control" style="height: 300px;"> </select> </div> <div class="col-sm-10"> <div class="row"> <div class="col-sm-12"> <div class="col-sm-2"> <div class="input-group"> <span class="input-group-addon">凍結</span> <input type="text" class="form-control input-sm" id="tb_dong" value="3" onchange="chang()" /> </div> </div> <div class="col-sm-4"> <%--<button type="button" id="btn_edit" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i> 編輯</button>--%> <%--<button type="button" id="btn_del" class="btn btn-sm btn-primary"><i class="fa fa-trash"></i> 刪除</button>--%> </div> </div> </div> <div class="row m-t-sm"> <div class="col-sm-12"> <div class="col-sm-10"> <table id="table_local" class="table table-striped table-bordered nowrap" width="100%" cellspacing="0"> </table> </div> </div> </div> </div> </div> </div> </form> </body>
後臺：
[WebMethod]
public static string GetData()
{
string a = GetField() + "&" + GetData1();
return a;
}
[WebMethod]
public static string GetField()
{
StringBuilder str_html1 = new StringBuilder();
int ii = 20;
str_html1.Append("[");
//str_html1.Append("{title:'<input id =\"checkbox_id_all\" name=\"checkbox_name_all\" type=\"checkbox\" value=\"\">'},");
for (int i = 0; i < ii; i++)
{
str_html1.Append("{title:'" + i + "'},");
}
str_html1.Append("{title:'<div style=\"width:60px;text-align:center;\">編輯</div>'},");//<p style=\"width:60px;text-align:center;\">編輯</p>
str_html1.Append("{title:'<div style=\"width:60px;text-align:center;\">刪除</div>'}");//<p style=\"width:60px;text-align:center;\">刪除</p>
str_html1.Append("]");
return str_html1.ToString();
}
[WebMethod]
public static string GetData1()
{
StringBuilder str_html = new StringBuilder();
int ii = 20;
int jj = 20;
str_html.Append("[");
for (int i = 0; i < ii; i++)
{
str_html.Append("[");
///str_html.Append("'<input type=\"checkbox\">',");
for (int j = 0; j < jj; j++)
{
//if (j == jj - 1)
//{
// str_html.Append("'" + i + "*" + j + "=" + i * j + "'");
//}
//else
//{
str_html.Append("'" + i + "*" + j + "=" + i * j + "',");
//}
}
str_html.Append("'<button type=\"button\" id=\"btn_edit_" + i + "\" class=\"btn btn-xs btn-primary\"><i class=\"fa fa-edit\"></i>編輯</button>',");
str_html.Append("'<button type=\"button\" id=\"btn_del_" + i + "\" class=\"btn btn-xs btn-danger\"><i class=\"fa fa-trash\"></i>刪除</button>'");
if (i == ii - 1)
{
str_html.Append("]");
}
else
{
str_html.Append("],");
}
}
str_html.Append("]");
return str_html.ToString();
}