The jquery DataTables and JQuery UI dialog Box Dialog Tutorial _jquery

First of all, introduce the two plug-ins function

1.DataTables is a form of jquery plug-in.

Official website and its download address: http:/www.datatables.net

The main features are as follows:

1. Automatic Paging processing

2. Instant Tabular Data filtering

3. Data sorting and data type automatic detection

4. Automatically handle column widths

5. Can be customized through the CSS style

6. Support for hidden columns

7. Easy to use

8. Scalability and flexibility

9. Internationalization

10. Create a table dynamically

11. Free of charge

2. dialog box (dialog), is a very important feature of the jquery UI . It completely replaces the JavaScript alert (), prompt () and other methods, but also avoids the new window or the complex redundancy of the page.

I'm here to talk directly about what I need to achieve, and everyone knows it.

Yes, it's a very simple delete feature, then pop up the dialog box and click OK to perform the deletion.

First, look at the DataTables inside.

$ (' #table '). DataTable ({"Sdom": "T" + "< ' soc-pagenagtion ' ip>", Olanguage: {"sprocessing": "In Process ...", "Slengthmenu ": Show _menu_ Item Results", "szerorecords": "No Match Results", "Sinfo": "Show _start_ to _end_ item results, total _total_ items", "Sinfoempty": "Show No. 0 to No. 0 result , a total of 0 items, "sinfofiltered": "(Filtered by _max_)", "Sinfopostfix": "", "Ssearch": "Search:", "sURL": "", "semptytable": "The data in the table is empty", "s Loadingrecords ":" Loading ... "," sinfothousands ":", "," opaginate ": {" Sfirst ":" Home "," sprevious ":" Prev "," Snext ":" Next Page "," Slast " : "Last"}, "Oaria": {"ssortascending": "To arrange this column in ascending order", "ssortdescending:": To arrange this column in descending order}, "Autowidth": false, "processing":
True, "ServerSide": true, "searching": false, Ordering:false, "info": true, Ajax:function (param, callback, settings) {
var service = $ ("#service"). Val (); var params = {//Parameter collection} $.ajax ({type: "Get", url: "", DataType: "JSON", Data:params, ContentType: "Application/x-www-for m-urlencoded; Charset=utf-8 ", Success:function (d) {if (d!==null) {callback ({//returned query result Recordstotal:d.pageutiL.total, Recordsfiltered:d.pageutil.total, data:d.pageutil.list});
}
}
}); 
}, "columns": [{"Data": "Code"}, {"Data": "Name"},//table corresponding field], "columndefs": [{"Render": function (data, type, row) { Here is the replacement display, for example, if the query result is 1, you can display other values if (row.o_status = = ' 0 ') {return [row.o_status = ' deactivate '].join (');} else if (row.o_status
= = ' 1 ') {return [row.o_status = ' Enable '].join (');} else {return [row.o_status = '].join (');}}, ' Targets ': 6}, {
This step is to append delete link "render": function (data, type, row) {return ["<a href= ' id= ' dialog_link ' > Delete </a>"].join ('); }, "Targets": 8}]};

And then there's the configuration and style of writing Dailog.

HTML code

<div id= "dialog-message" title= "hint" >
<p> <span class= "Ui-icon ui-icon-circle-check" style= "
Float:left; margin:0 7px 50px 0; " ></span>
Do you want to delete this piece of data?
</p>
</div>

JS Code

The Jquery-ui dialog box
is set $ ("#dialog-message"). Dialog ({
autoopen:false,
width:400,
resizable:false,< C11/>modal:true,
title: "",
buttons: [{
HTML: "Confirmation",
"class": "Btn Btn_b",
click:function () {
var code= window.parent.$ ("#dialog-message"). Data ("code");//Here is to get the passed-in parameter value
location.href= ";
$ (This). dialog (' Close ');
}
, {
html: Cancel,
' class ': ' btn btn_o ',
click:function () {
$ (This). dialog ("Close");}}
);

And then how is the pass parameter into the dialog box

First, define the Click event Pop-up dialog box

/**
* Pop-up dialog box and pass the parameter * *
(' #table tbody '). On (' Click ', ' #dialog_link ', function () {
var table = $ (' #table ') . DataTable ();
var data = Table.row ($ (this). Parents (' tr ')). Data ()//This is the
$ (' #dialog-message ') that gets the current row you clicked on. data.code). dialog (' Open ');//Then Pass in the dialog box, open the dialog box return
false;
});

I've been using it before.

$ ("#dialog_link"). Click (function () {
});

I don't know why I can't open the dialog box

Note the dialog box settings must be placed above the above code

The above is a small series to introduce the jquery DataTables and JQuery UI dialog Box dialog tutorial, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!