Bootstrap DataTable Custom Table toolbar

The table styles provided by the Bootstrap DataTable are:

But if you want to achieve the effect of the graph:

It needs to be modified in the jquery function as follows:

$ (document). Ready (function () {
$ (' #dataTables-example '). DataTable ({
"Dom": ' < top ' fl>< "toolbar" >rt< "Bottom" ip>< "clear" > '
} );
$ ("Div.toolbar"). HTML (' <select><option>All</option><option>Archive</option>< Option>no-archive</option></select> '). addclass ("select");
} );

where the F in FL is the search box, L is the number of bars displayed per page, R is not yet found, T should be control pattern, I is the total number of data bar below the table, p is the button to page. Think of a DataTable that writes.

As a result, the < top fl>< "right" >< "toolbar" >rt< "Bottom" ip>< "clear" > "means:<top> That is, place the search box above the table and the number of bars displayed per page, and then place our custom items on the right, such as the drop-down list in the example. And so on The specific DataTable provides us with these configurations is how to achieve or need to delve into, I still can not fully understand the wording, after all, I am still a rookie.

< "XXX" > usage should be to say, create a class named XXX Div, to put things in the Div, it is written above that,< "xxx" FL>, to be able to imagine a div and div look, it will be more comfortable to use.

Write it down and use it as a note.