Home > Others

Basic operation of Datables

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "UTF-8"%>
<!--views/component/commomopinion/opinionlist.jsp--
<% @include file= "/web-inf/views/commons/common.jsp"%>
<% @include file= "/web-inf/views/themes/bootstrap_theme.jsp"%>
<% @include file= "/web-inf/views/commons/bootstrap_datetimepicker.jsp"%>
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<meta name= "keywords" content= ""/>
<meta name= "description" content= ""/>
<meta content= "Telephone=no" name= "format-detection"/><!------ignore digital auto-identification ask phone number------->
<meta content= "Email=no" name= "format-detection"/><!------Ignore auto-Identify mailbox------->
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>
<!--about X-ua-compatible--
<meta http-equiv= "x-ua-compatible" content= "ie=6" ><!--use IE6-
<meta http-equiv= "x-ua-compatible" content= "ie=7" ><!--use IE7-
<meta http-equiv= "x-ua-compatible" content= "ie=8" ><!--use IE8-
<meta name= "renderer" content= "Webkit|ie-comp|ie-stand" >
<title> Common Views List </title>
<link rel= "stylesheet" href= "${ui_frame_path}/data-tables/1.10.5/extensions/styling/bootstrap/ DataTables.bootstrap.css ">
<link href= "${ui_frame_path}/bootstrap/3.3.4/css/bootstrap.min.css" type= "Text/css" rel= "stylesheet" >
<link href= "${css_path}/jquery-ui.css" type= "Text/css" rel= "stylesheet"/>
<link href= "${css_path}/mstyle.css" type= "Text/css" rel= "stylesheet"/>
<link href= "${css_path}/font-awesome.min.css" type= "Text/css" rel= "stylesheet"/>
<script type= "Text/javascript" src= "${ui_frame_path}/data-tables/1.10.5/js/jquery.datatables.min.js" ></ Script>
<script type= "Text/javascript" src= "${ui_frame_path}/data-tables/1.10.5/extensions/styling/bootstrap/ DataTables.bootstrap.js "></script>
<script type= "Text/javascript" src= "${ui_modules_path}/uniflow/autorefresh.js" ></script>
<script type= "Text/javascript" src= "${ui_modules_path}/uniflow/tools.js" ></script>
<script type= "Text/javascript" src= "${static_resources_path}/websrv-potal/js/bootstrap.min.js" ></script >
<script type= "Text/javascript" src= "${js_path}/myopinion/myopinion.js" ></script>

<body>
<div class= "Container-fluid" style= "margin-top:10px" >
<div class= "Row-fluid" >
<div class= "Span12" id= "Content" >
<div class= "Row-fluid" >
<div class= "Span12" >
<div class= "Btn-toolbar" >
<div class= "Pull-right" >
<div class= "Input-append" >
<input type= "text" placeholder= "Fuzzy Query" id= "fuzzy-search-content" style= "height:33px;border-radius:4px 4px 4px 4px;" >
<div class= "Btn-group" >
<button type= "button" class= "btn" id= "Fuzzy-search" ><i class= "fa fa-search" ></i></button>
</div>
</div>
</div>
<button type= "button" class= "btn btn-primary btn-w" id= "Btn-add" ><i class= "FA fa-plus" ></i> add </ Button>
<button type= "button" class= "btn btn-primary btn-w" id= "Btn-alldel" ><i class= "fa fa-remove" ></i> Bulk Delete </button>
</div>
</div>
</div>

<div class= "Block Info-block" id= "User-view" style= "Display:none;" >
<div class= "block-content info-content clearfix" >
<div style= "Float:left;" >
<label class= "Prop-name" > Views:</label>
<input type= "text" id= "Opinion-edit" style= "width:280px;height:33px;border-radius:4px 4px 4px 4px;" Name= "Extn-add "/>
</div>
<div class= "Pull-right" >
<button type= "button" class= "btn btn-primary btn-w" id= "Opinion-edit-save" > Save </button>
</div>
</div>
</div>

<div class= "Block Info-block" id= "User-add" style= "Display:none;" >
<div class= "block-content info-content clearfix" >
<form id= "Form-add" style= "MARGIN:0PX;PADDING:0XP;" >
<div style= "Float:left;" >
<label class= "Prop-name" > Views:</label>
<input type= "text" id= "Opinion-add" style= "width:280px;height:33px;border-radius:4px 4px 4px 4px;" Name= "Extn-add" />
</div>
<div class= "Pull-right" >
<button type= "button" class= "btn btn-primary btn-w" onclick= "saveaddopinion ()" id= "Btn-save-add" > OK add </ Button>
<button type= "button" class= "btn btn-cancel" onclick= "Canceladdopinion ()" > Cancel </button>
</div>
</form>
</div>
</div>
<div class= "Row-fluid" >
<div class= "Span12" id= "Div-table-container" >
<table class= "Table table-striped table-bordered table-hover table-condensed" id= "drafttasktable" cellspacing= "0" Width= "100%" >
<thead>
<tr>
<th width= "10px" >
<input type= "checkbox" Name= "Cb-check-all" id= "Cb-check-all" >
</th>
<th width= "40px" > Serial number </th>
<th> Opinions </th>
<th > Operations </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script type= "Text/javascript" >

</script>

$ (document). Ready (function () {
var table = $ (' #draftTaskTable '). DataTable ();//drafttasktable is the ID of the table in the JSP
Table.state.clear ();//Clear the original state
Inittable ();
});


var _datatablesinstance = undefined;
function Inittable (EXT) {
var numcount = 1;
var option = {
"Bpaginate": true,//one line display number selector two mates
"Blengthchange": true,//one line display number selector two mates
"Alengthmenu": [5, 10, 15, 20, 25],//footer drop-down Select the setting to display the number of rows of data
"Bstatesave": true,//switch, whether to open the client status record function, record the original page to show how many records
"Bfilter": false,//Remove default Search box
"Bsort": false,//sort
"Bjqueryui": false,
"Idisplaylength": 5,//page Display number pagesize
"Bautowidth": true,//adaptive width
"Spaginationtype": "Full_numbers",//Detailed paging group, can support jump directly to a page
"Sajaxdataprop": "AData",
"Bdestroy": true,
"Bprocessing": true,//Show progress bar
"Bserverside": true,//service-side paging
"Sdom": "rt< ' bottom ' ilp< ' clear ' >>",
"Sajaxsource": framework_base_path+ "/myopinion/getopinionlist",//action path for loading data
"Sservermethod": "POST",
"Aocolumns": [
{"Mdata": null, "Mrender": function (data,type,full) {//data initialized to be the same as the number of columns in thead of table
Return ' <input type= ' checkbox ' id= ' +data.id+ ' class= ' iCheck ' name= ' chosecheck ' > ';
}
},
{"Mdata": null, "Targets": 0},
{"Mdata": "Opinionname"},
{"Mdata": null, "Mrender": function (data,type,full) {
Return ' <button type= ' button "class=" btn Btn-small "id=" moveUp "> Move up </button> <button type=" button "id=" MoveDown "class=" btn Btn-small "> Move Down </button> ' +
' <button type= ' button "class=" btn Btn-small "id=" Btn-del "> Delete </button> <button type=" button "class=" btn Btn-small "id=" Btn-edit "> Modify </button>";
}
}
],
Remove null error messages to avoid displaying null
"Aocolumndefs": [{
Sdefaultcontent: ",
Atargets: [' _all ']
} ],

"Olanguage": {
"sURL": Ui_frame_path + "/data-tables/1.10.5/extensions/language/chinese.json"
},
"Fnserverdata": Function (ssource, Aodata, Fncallback) {
Aodata.push ({"Name": "Sdata", "Value": Json.stringify (Sdata)});
$.ajax ({
"Type": ' Post ',
"url": ssource,
"DataType": "JSON",
"Data": {
"Aodata": json.stringify (Aodata),
"Opinionname": $ (' #fuzzy-search-content '). Val ()
},
"Success": function (RESP) {
Fncallback (RESP);
},
"Error": function (RESP) {
Alert ("error;;");
}
});
},
"Fndrawcallback": function () {
var API = This.api ();
var startindex= api.context[0]._idisplaystart;//Gets the number of bars to start on this page
Api.column (1). nodes (). each (function (cell, i) {
Here StartIndex + i + 1, will appear the page number is discontinuous, mainly because of startIndex reason, remove can.
cell.innerhtml = StartIndex + i + 1;
});
}

};
var sdata = {
Sdata:[{name: ' Opinionname ', Value: $ (' #fuzzy-search-content '). Val ()}]
};
if (EXT) {
option = $.extend (true, option, ext);
}
_datatablesinstance = $ ("#draftTaskTable"). DataTable (option);
$ ("#btn-add"). Click (function () {
Usermanage.additeminit ();
});

$ ("#fuzzy-search"). Click (function () {
Usermanage.searchiteminit ();
});

$ ("#btn-alldel"). Click (function () {
var arritemid = [];
$ ("tbody:checkbox:checked"). each (function () {
VAR item =_datatablesinstance.row ($ (this). Closest (' tr ')). data ();
Arritemid.push (item);
});
Usermanage.deleteitem (Arritemid);
});

$ ("#opinion-edit-save"). Click (function () {
Usermanage.edititemsubmit ();
});

$ (' #draftTaskTable '). On ("Change", ": CheckBox", function () {
if ($ (this). is ("[Name= ' Cb-check-all ']")) {
Select All
$ (": CheckBox", $ (' #draftTaskTable ')). Prop ("Checked", $ (this). Prop ("checked"));
}else{
General Check
var checkbox = $ ("Tbody:checkbox", $ (' #draftTaskTable '));
$ (": checkbox[name= ' Cb-check-all ')", $ (' #draftTaskTable ')). Prop (' checked ', checkbox.length = = Checkbox.filter (': Checked '). length);
}
}). On ("click", ". Td-checkbox", function (event) {
Click on a cell to click the check box
!$ (Event.target). Is (": CheckBox") && $ (": CheckBox", this). Trigger ("click");
}). On ("click", "#btn-edit", function () {
Click the Edit button
var item = _datatablesinstance.row ($ (this). Closest (' tr ')). data ();
$ (this). Closest (' tr '). addclass ("active"). Siblings (). Removeclass ("active");
Usermanage.currentitem = Item;
Usermanage.edititeminit (item);
}). On ("click", "#btn-del", function () {
Click the Delete button
VAR item =_datatablesinstance.row ($ (this). Closest (' tr ')). data ();
$ (this). Closest (' tr '). addclass ("active"). Siblings (). Removeclass ("active");
Usermanage.deleteitem ([item]);
}). On ("click", "#moveUp", function () {
Click the Move Up button
VAR item =_datatablesinstance.row ($ (this). Closest (' tr ')). data ();
$ (this). Closest (' tr '). addclass ("active"). Siblings (). Removeclass ("active");
Usermanage.moveitem (item, "MoveUp");
}). On ("click", "#moveDown", function () {
Click the Move Down button
VAR item =_datatablesinstance.row ($ (this). Closest (' tr ')). data ();
$ (this). Closest (' tr '). addclass ("active"). Siblings (). Removeclass ("active");
Usermanage.moveitem (item, "MoveDown");
});

}

function Saveaddopinion () {
var opinionname = $ ("#opinion-add"). Val (). Trim ();
if (null = = Opinionname && opinionname.size () ==0) {
Alert ("The comment content cannot be empty!") ");
Return
}
$.ajax ({
url:framework_base_path+ "/myopinion/addopinion",
Type: "Post",
DataType: "JSON",
data:{
"Opinionname": Opinionname
},
Success:function (JSON) {
if (json.result== true) {
$ ("#user-add"). Hide ();
$ ("#opinion-add"). Val ("");
var tablesetings=$ (' #draftTaskTable '). DataTable (). Fnsettings ();
var paging_length=tablesetings._idisplaylength;//how much is currently displayed per page
var page_start=tablesetings._irecordstotal;//current page start
var pagenum=div (page_start,paging_length);
$ ("#draftTaskTable"). DataTable (). Page (Pagenum). Draw (false);

/*$ ("#draftTaskTable"). DataTable (). page (0). Draw (); */
/* $ (' #draftTaskTable '). DataTable (). State.clear ();//Clear the original state
Inittable (); */
}
}
});
}

function Canceladdopinion () {
$ ("#user-add"). Hide ();
}
var usermanage = {
Currentitem:null,
Additeminit:function () {
$ ("#user-add"). Show (). Siblings (". Info-block"). Hide ();
},
Edititeminit:function (item) {
if (!item) {
Return
}
$ ("#user-view"). Show (). Siblings (". Info-block"). Hide ();
$ ("#opinion-edit"). Val (Item.opinionname);
},
Edititemsubmit:function () {
var opinionname = $ ("#opinion-edit"). Val ();
var opinionid = userManage.currentItem.id;
$.ajax ({
url:framework_base_path+ "/myopinion/updateopinion",
Type: "Post",
DataType: "JSON",
data:{
"Opinionname": Opinionname,
"Opinionid": Opinionid
},
Success:function (JSON) {
$ ("#user-view"). Hide ();
if (json.result== true) {
Editfresh ();
}
}
});
},
Deleteitem:function (SelectedItems) {
VAR message;
var senddate= "";
var Sendurl;
if (selecteditems&&selecteditems.length) {
if (selecteditems.length = = 1) {
Message = "Are you sure you want to delete '" +selecteditems[0].opinionname+ "?";
Senddate = selecteditems[0].id;
Console.log (senddate);
Sendurl = framework_base_path+ "/myopinion/deleteopinion";
}else{
Message = "Are you sure you want to delete the selected" +selecteditems.length+ "entry record?";
for (Var i=0;i<selecteditems.length;i++) {
Senddate +=selecteditems[i].id + ","
}
Sendurl = framework_base_path+ "/myopinion/batchdeleteopinion";
$ ("#cb-check-all"). attr ("checked", false);
}
if (!confirm (message)) {
Return
}
$.ajax ({
Url:sendurl,
Type: "Post",
DataType: "JSON",
data:{
"Opinionid": senddate
},
Success:function (JSON) {
if (json.result== true) {
$ ("#user-view"). Hide ();
Editfresh ();
Return
}
}
});
}else{
Alert (' Please select the line to be manipulated first ');
}
},
Moveitem:function (Selecteditems,moveway) {
$.ajax ({
url:framework_base_path+ "/myopinion/moveopinion",
Type: "Post",
DataType: "JSON",
data:{
"Opinionid": selecteditems.id,
"Opinionname": $ ("#fuzzy-search-content"). Val (),
"Moveway": Moveway
},
Success:function (JSON) {
var message = Json.message;
if (json.result== false) {
if (message== "is the top line!" | | message== "is the last line!") {
alert (message);
}
}
if (json.result== true) {
Editfresh ();
}
}
});
},
Searchiteminit:function () {
$ ("#draftTaskTable"). DataTable (). page (0). Draw (false);
}

};

function Editfresh () {
var tablesetings=$ (' #draftTaskTable '). DataTable (). Fnsettings ()
var paging_length=tablesetings._idisplaylength;//how much is currently displayed per page
var page_start=tablesetings._idisplaystart;//current page start
var pagenum=div (page_start,paging_length);
$ ("#draftTaskTable"). DataTable (). Page (Pagenum). Draw (false);
}
function Div (EXP1, EXP2) {//divisible
var n1 = Math.Round (EXP1); Rounded
var N2 = Math.Round (EXP2); Rounded
var rslt = n1/n2; Except
if (rslt >= 0) {
Rslt = Math.floor (RSLT); Returns the largest integer less than or equal to the original rslt.
}
else {
Rslt = Math.ceil (RSLT); Returns the smallest integer greater than or equal to the original rslt.
}
return rslt;
}

Basic operation of Datables

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
chapter 3 basic vehicle operation worksheet answers basic function of seed handbook of large turbo generator operation and maintenance ora 01013 user requested cancel of current operation what full meaning of basic in computer list of basic linux commands with examples what is basic rule of netiquette

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More